Flex 항목이 수직으로 쌓이지 않고 나란히 렌더링되는 것을 방지하려면 어떻게 해야 합니까?

Flex 항목이 나란히 렌더링되지 않도록 방지

Flexbox를 사용할 때 항목을 중앙에 배치하려는 상황이 자주 발생합니다. 블록이지만 각 항목이 자체 행을 차지합니다. 안타깝게도 Flexbox는 항목을 서로 아래에 배치하려고 할 때 항목을 옆으로 이동시키는 경우가 있습니다.

justify-content가 포함된 Flexbox를 사용하여 주황색 사각형과 텍스트 요소가 컨테이너 내부에 배치되는 다음 HTML 구조를 고려하세요. align-items: center:

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

그리고 관련 CSS:

.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;
}

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

적용 시 Flexbox에서는 주황색 사각형이 텍스트 위에 위치하지 않고 옆쪽으로 끝납니다. 이 문제를 해결하려면 내부 컨테이너의 flex-direction 속성을 수정해야 합니다.

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

flex-direction 설정: 열은 flexbox에 자식을 행이 아닌 하나씩 아래에 수직으로 표시하도록 지시합니다. . 이 동작은 우리의 요구 사항에 부합하며 텍스트 위에 주황색 사각형을 배치합니다.

위 내용은 Flex 항목이 수직으로 쌓이지 않고 나란히 렌더링되는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!