여러 브라우저에서 일관된 수평 확장 Flexbox 컨테이너 동작을 달성하는 방법은 무엇입니까?

수평 확장 Flexbox 컨테이너

문제

Flexbox에서 콘텐츠가 래핑된 컨테이너의 동작은 브라우저에 따라 다릅니다. IE 11은 요소를 래핑하기 위해 컨테이너를 수평으로 늘려 원하는 동작을 보이는 반면 Firefox와 Chrome은 불일치를 보여줍니다.

해결책

브라우저에는 열 플렉스 컨테이너의 전체 구현이 부족하지만 쓰기 모드를 잘 지원합니다. 세로 쓰기 모드의 행 플렉스 컨테이너를 활용하면 컨테이너의 인라인 방향이 블록 방향으로 교체됩니다. Flex 항목은 세로로 흐르며 가로 쓰기 모드는 Flex 항목 내에서 복원될 수 있습니다.

예제 코드

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

.photo {
  writing-mode: horizontal-tb;
  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>

이 접근 방식은 컨테이너가 가로로 늘어나도록 하여 IE 11의 동작을 모방합니다. Firefox 및 Chrome에서 래핑된 콘텐츠를 수용합니다.

위 내용은 여러 브라우저에서 일관된 수평 확장 Flexbox 컨테이너 동작을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!