Flex 항목이 나란히 표시되는 것을 방지하는 방법은 무엇입니까?

Flex 항목이 나란히 표시되는 것을 방지

Flexbox는 블록 내에서 항목을 정렬하는 효과적인 방법을 제공합니다. 그러나 항목을 수평이 아닌 수직으로 표시하려는 시나리오가 발생하면 기본 플렉스 동작이 방해가 될 수 있습니다.

문제 설명:

에도 불구하고 Flexbox를 사용하여 블록의 항목을 중앙에 배치하면 항목이 계속해서 나란히 표시됩니다. 원하는 결과는 각 항목이 자체 행을 차지하는 것입니다. 예를 들어 주황색 사각형은 텍스트 위에 있어야 하지만 Flex가 텍스트 옆에 위치를 변경했습니다.

해결책:

이 문제를 해결하는 열쇠는 다음과 같습니다. 다음 스타일을 추가할 때:

.inner {
  flex-direction: column;
}

"열"을 플렉스 방향으로 지정하여 다음과 같이 지시합니다. 자식을 세로로 표시하는 Flexbox입니다. 이렇게 하면 문제가 해결되고 항목이 의도한 대로 배치됩니다.

업데이트된 스니펫:

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

<style>
  .container {
    ...
  }

  .inner {
    ...
    flex-direction: column;
  }

  .square {
    ...
  }
</style>

"flex-direction" 속성을 "column"으로 설정하면 이제 Flexbox 요소가 행으로 표시되어 나란히 배치되는 원래 문제가 해결되었습니다.

위 내용은 Flex 항목이 나란히 표시되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!