브라우저 전체에 래핑된 콘텐츠를 사용하여 Flexbox 컨테이너를 수평으로 확장하는 방법은 무엇입니까?

래핑된 콘텐츠를 사용하여 Flexbox 컨테이너를 수평으로 확장

Flexbox는 유연한 레이아웃을 만들기 위한 강력한 솔루션을 제공합니다. 그러나 브라우저 동작에 불일치가 발생하여 예상치 못한 결과가 발생할 수 있습니다. Flexbox 컨테이너를 래핑된 콘텐츠로 수평으로 확장하려고 할 때 이러한 문제 중 하나가 나타납니다.

다음 HTML 및 CSS 코드를 고려하세요.

<div class="container">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

.container {
  display: inline-flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 100%;
}

이 코드는 위에서 아래로 흐르는 이미지 그리드로, 맨 아래에 도달하면 감싸집니다. 그러나 브라우저 동작은 다양합니다.

• IE 11: 컨테이너는 래핑된 요소를 성공적으로 수용하도록 확장됩니다.
• Firefox: 첫 번째 요소만 래핑합니다. 다른 요소가 넘쳐나는 요소 열.
• Chrome: 컨테이너는 항상 상위 요소의 너비를 채웁니다.

다른 브라우저에서 원하는 동작을 달성하려면 다음을 고려하세요. 세로 쓰기 모드가 있는 행 플렉스 컨테이너를 활용합니다.

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

<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>

블록 방향을 인라인 방향으로 바꾸면 플렉스 항목이 세로로 흐릅니다. Flex 항목 내에서 가로 쓰기 모드를 복원하면 솔루션이 완성됩니다. 이 기술을 사용하면 브라우저 전체에서 일관된 방식으로 열 줄바꿈 콘텐츠와 일치하도록 수평으로 확장되는 Flexbox 컨테이너를 생성할 수 있습니다.

위 내용은 브라우저 전체에 래핑된 콘텐츠를 사용하여 Flexbox 컨테이너를 수평으로 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!