래핑된 콘텐츠를 수용하기 위해 Flexbox 컨테이너를 수평으로 확장하려면 어떻게 해야 합니까?

Flexbox 컨테이너가 수평으로 확장되는 방법

Flexbox는 페이지 요소의 레이아웃과 정렬에 대한 미묘한 제어를 제공합니다. 한 가지 과제는 래핑된 콘텐츠를 수용할 수 있도록 Flexbox 컨테이너를 수평으로 확장하는 것입니다. 이와 관련하여 브라우저는 다양한 동작을 나타내므로 특정 솔루션이 필요합니다.

원하는 이미지 그리드를 고려하세요.

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

열 줄바꿈을 지정했음에도 불구하고 Firefox는 컨테이너의 너비를 첫 번째 열의 요소로 제한합니다. Chrome은 콘텐츠에 관계없이 상위 너비로 확장합니다. IE11의 동작을 달성하려면 대체 접근 방식이 필요합니다.

쓰기 모드 활용

브라우저는 일반적으로 쓰기 모드를 잘 지원합니다. 쓰기 모드를 사용하면 블록 방향과 인라인 방향을 바꿀 수 있어 플렉스 항목의 수직 흐름이 가능해집니다. 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;
}

컨테이너의 쓰기 모드를 Vertical-lr로 설정하고 flex 항목에 writing-mode:horizontal-tb를 적용하면 효과적으로 달성할 수 있습니다. 수직 흐름과 수평 확장. 이 솔루션은 쓰기 모드에 대한 브라우저 지원과 일치하며 수평 확장 Flexbox 컨테이너에 대한 특정 요구 사항을 해결합니다.

위 내용은 래핑된 콘텐츠를 수용하기 위해 Flexbox 컨테이너를 수평으로 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!