Flexbox 항목을 두 개의 특정 행에 강제로 적용하려면 어떻게 해야 합니까?

Flexbox: 두 행에 항목 표시

Flexbox에서는 컨테이너에 flex-wrap:wrap을 설정하여 항목을 여러 줄에 쉽게 배포할 수 있습니다. 그러나 항목을 특정 행에 강제로 적용하려면 요소의 크기와 간격을 제어해야 합니다.

동적 크기 조정 항목 문제

제공된 코드에는 flex가 포함된 8개 항목이 있습니다. -grow: 1. 이는 각 항목이 가능한 한 많은 공간을 차지하려고 시도함을 의미합니다. 이는 원하는 2행 레이아웃을 방해할 수 있습니다.

해결책: 항목 너비 제어

각각 4개의 항목으로 구성된 2개의 행을 생성하려면 하위 요소에 대해 고정 너비를 정의해야 합니다. 다음과 같이 하위 스타일을 수정합니다.

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1: flex-grow를 1로 설정하여 항목을 허용합니다. 성장
  • 0: flex-shrink를 0으로 설정하여 항목이 크기 이상으로 축소되는 것을 방지합니다. 21% 너비
  • 21%: 각 항목의 초기 너비를 지정합니다(이 값을 약간 조정해야 할 수도 있음)

flex-wrap 및 항목 너비가 정의되면 이제 항목이 4개씩 2줄로 깔끔하게 정렬됩니다.

위 내용은 Flexbox 항목을 두 개의 특정 행에 강제로 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!