여러 브라우저에서 래핑된 Flex 항목에 대해 일관된 수평 확장을 달성하는 방법은 무엇입니까?

포장된 콘텐츠를 위한 수평 확장 Flex 컨테이너

CSS Flexbox를 활용하면 브라우저가 특정 속성에 대해 다양한 동작을 보일 수 있습니다. 특히, 열로 배열된 이미지 그리드를 생성하고 이를 줄바꿈하도록 허용하면 브라우저 전반에서 일관된 동작을 달성하는 데 어려움을 겪을 수 있습니다.

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

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

그리고 그에 수반되는 코드 CSS:

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

목표는 컨테이너가 래핑된 요소를 수용할 수 있도록 수평으로 확장하여 이미지 열이 포함된 격자형 레이아웃을 제공하는 것입니다. 그러나 제공된 jsFiddle에서 경험할 수 있듯이 브라우저 동작은 다릅니다.

• IE 11: 컨테이너는 가로로 확장되어 요소의 각 열을 래핑합니다.
• Firefox: 요소의 첫 번째 열만 래핑되고 나머지는 래핑됩니다. 넘칩니다.
• Chrome: 컨테이너는 항상 상위 컨테이너의 너비를 채우기 위해 늘어납니다.

이러한 불일치를 해결하고 IE 11에서 관찰된 동작을 달성하려면, 다음 솔루션을 구현하십시오.

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

이 접근 방식은 세로 쓰기 기능이 있는 행 플렉스 컨테이너를 활용합니다. 모드. 블록 방향과 인라인 방향을 바꾸면 플렉스 항목이 강제로 수직으로 흐르게 됩니다. 그러면 개별 플렉스 항목 내의 쓰기 모드가 수평으로 재설정됩니다. 결과적으로 컨테이너는 래핑된 콘텐츠에 맞게 수평으로 확장되어 IE 11에서 관찰된 동작을 모방합니다.

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