내용을 포장하기 위해 Flexbox 컨테이너를 수평으로 확장하는 방법은 무엇입니까?

콘텐츠 래핑을 위해 Flexbox 컨테이너를 수평으로 확장하는 방법은 무엇입니까?

CSS Flexbox를 사용할 때 브라우저는 특히 컨테이너 크기 조정과 관련하여 다양한 동작을 나타냅니다. 이러한 불일치를 해결하기 위해 우리는 래핑된 콘텐츠를 수용할 수 있도록 Flexbox 컨테이너를 수평으로 확장하는 솔루션을 찾고 있습니다.

특정 시나리오에서는 컨테이너가 열 레이아웃으로 배열된 여러 div 요소를 포함해야 할 수도 있습니다. 목표는 이러한 요소가 수직으로 흐르고 하단에 도달하면 감싸서 텍스트 또는 이미지 열을 생성하는 것입니다. 그러나 래핑된 요소와 일치하도록 컨테이너의 가로 확장을 제어하는 ​​것은 여전히 ​​어려운 일입니다.

원하는 동작을 달성하려면 세로 쓰기 모드로 행 플렉스 컨테이너를 활용할 수 있습니다. 이렇게 하면 인라인 방향과 블록 방향이 반전되어 플렉스 항목이 수직으로 흐르게 됩니다. 결과적으로 정렬된 쓰기 모드가 Flex 항목 내에서 반전되어 수평 정렬이 복원됩니다.

실제 데모를 위해 다음 코드 조각을 고려하세요.

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb; /* Restores horizontal alignment */
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

이 기술을 통해 , 새 콘텐츠가 추가되면 컨테이너가 동적으로 수평으로 확장되므로 개별 요소가 적절하게 래핑되고 정렬됩니다.

위 내용은 내용을 포장하기 위해 Flexbox 컨테이너를 수평으로 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!