Flex 항목을 수직으로 정렬하려면 어떻게 해야 합니까?

Flex 항목을 수직으로 정렬

Flexbox는 컨테이너 내의 요소를 정렬하는 편리한 방법을 제공합니다. 그러나 때로는 항목이 원하는 수직 순서 대신 나란히 렌더링되는 문제가 발생할 수 있습니다. 이는 display: flex를 사용할 때 발생할 수 있습니다.

flex 항목이 나란히 렌더링되는 것을 방지하려면 상위 요소에 다음 스타일을 추가하기만 하면 됩니다.

flex-direction: column;

이 지시어는 Flexbox가 자식 항목을 열이 아닌 열에 표시하도록 지시합니다. 행.

예:

제공된 코드 조각에서:

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

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

처음에는 "사각형" 및 "일부 텍스트" 요소가 나란히 놓이게 됩니다. 이 문제를 해결하려면 다음 CSS를 추가하세요.

.inner {
  flex-direction: column;
}

이렇게 하면 "사각형"이 "일부 텍스트" 요소 위에 배치되어 원하는 수직 레이아웃이 달성됩니다.

위 내용은 Flex 항목을 수직으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!