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

Flex 항목이 나란히 렌더링되는 것을 방지

문제:

Flexbox를 사용하여 블록 내의 요소를 중앙에 배치할 때, 항목이 수직으로 서로 아래에 표시되는 대신 나란히 표시되는 문제가 발생하는 것이 일반적입니다. 이는 특정 상황에서는 바람직하지 않을 수 있습니다.

해결책:

flex 항목이 나란히 렌더링되지 않도록 하려면 다음 CSS 스타일을 구현하세요.

.inner {
  flex-direction: column;
}

설명:

이 스타일 속성 컨테이너 요소 내에서 Flex 항목이 정렬되는 방향을 지정합니다. flex-direction을 열로 설정하면 flexbox가 열 대신 행에 하위 항목을 표시하도록 지시할 수 있습니다. 이렇게 하면 원하는 대로 항목이 서로 수직으로 정렬됩니다.

업데이트된 예:

다음 업데이트된 코드 조각은 이 솔루션의 작동 방식을 보여줍니다.

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

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

flex-direction:column을 활용하면 이제 주황색 사각형과 텍스트가 의도한 대로 컨테이너 요소를 구현합니다.

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