8개 요소의 크기를 동적으로 조정할 때 Flexbox를 사용하여 각각 4개 요소로 구성된 두 행을 강제로 적용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

8개 요소의 크기를 동적으로 조정할 때 Flexbox를 사용하여 각각 4개 요소로 구성된 두 행을 강제로 적용하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-29 08:07:10

원래의

295명이 탐색했습니다.

How to Force Two Rows of Four Elements Each Using Flexbox When Dynamically Resizing Eight Elements?

Flexbox 레이아웃: 행당 4개 요소

Flexbox를 사용하여 페이지의 8개 요소 크기를 동적으로 조정할 때 강제로 분할하는 방법 두 행(행당 4개)으로?

다음 코드 조각 제공:

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

로그인 후 복사

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

로그인 후 복사

해결책:

문제는 flex-wrap에 있습니다. flex on the flex 컨테이너 - 요소를 래핑할 수 있습니다. 그러나 flex-grow: 1은 요소의 무제한 성장을 허용하므로 공간이 부족할 때 래핑에 실패하게 됩니다.

해결책은 요소의 너비를 정의하여 요소를 강제로 감싸는 것입니다.

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* 展开说明如下 */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

로그인 후 복사

flex 속성의 첫 번째 값(예제에서는 1)은 모든 요소에 공간을 균등하게 분배합니다. 요소에서 두 번째 값(0)은 최소 너비를 0으로 설정하고, 세 번째 값(21%)은 요소의 최대 너비를 사용 가능한 너비의 21%로 정의합니다. 이렇게 설정하면 최대 너비에 도달하기 전에 요소가 래핑되어 행당 4개 요소의 레이아웃이 생성됩니다.

위 내용은 8개 요소의 크기를 동적으로 조정할 때 Flexbox를 사용하여 각각 4개 요소로 구성된 두 행을 강제로 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!