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

Flex 항목을 수직으로 정렬

Flexbox를 사용하여 요소를 중앙에 배치할 때 항목이 수직이 아닌 수평으로 쌓이면 가끔 답답할 때가 있습니다. 이 문제는 Flex 항목에 텍스트나 이미지와 같은 자연스러운 인라인 흐름이 있을 때 발생합니다.

문제:

다음 코드 조각을 고려하세요.

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

주황색 사각형과 텍스트를 .inner 컨테이너의 중앙에 배치하려는 의도입니다. 그러나 출력에는 텍스트가 중간에 잘린 상태로 사각형과 텍스트가 나란히 표시됩니다.

해결책:

이 동작을 수정하려면 다음이 필요합니다. 내부 컨테이너의 플렉스 방향을 변경합니다. 기본적으로 Flexbox는 자식을 가로로 표시합니다. 세로로 쌓이도록 하기 위해 flex-direction 속성을 열로 설정했습니다.

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

이 업데이트된 코드 조각은 Flex 항목을 강제로 세로로 정렬하여 나란히 쌓이는 문제를 해결합니다.

업데이트된 출력:

이제 주황색 사각형이 텍스트 위에 나타납니다. 원래 의도대로. 이는 특정 요소가 Flex 컨테이너 내에서 특정 방식으로 정렬된 상태를 유지하도록 하려는 경우에 유용한 기술입니다.

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