래핑할 때에도 여러 행에 걸쳐 동일한 너비의 Flex 항목을 달성하려면 어떻게 해야 합니까?

가변 크기 컨테이너의 동일한 너비 Flex 항목

Flexbox는 유연하고 반응성이 뛰어난 레이아웃을 허용하지만 유지 관리를 시도할 때 문제가 발생할 수 있습니다. 목록이 래핑된 후 플렉스 항목 간의 너비가 동일합니다.

현재 Flexbox 제한 사항

현재 사양에서 Flexbox에는 마지막 행의 동일한 너비 정렬을 위한 기본 솔루션이 부족합니다. 이는 Flex 항목의 크기가 사용 가능한 공간에 따라 결정되고 마지막 행에 남은 공간이 더 적기 때문입니다.

대체 솔루션: 그리드 레이아웃

그리드 또 다른 CSS 레이아웃 기술인 레이아웃은 이러한 정렬 문제에 대한 보다 강력한 솔루션을 제공합니다. 그리드를 사용하면 컨테이너 내 요소의 크기와 위치를 명시적으로 지정할 수 있습니다.

CSS 코드

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

설명

• grid-template-columns 속성은 그리드의 열 크기와 수를 정의합니다(최대 컨테이너에 맞게 각각 최소 너비가 100px이고 유연한 1fr 단위입니다.
• grid-auto-rows 속성은 행 높이를 설정합니다(이 경우 20px).
• grid-gap은 항목 사이의 공간을 지정합니다.

이 구성은 사용 가능한 너비를 Flex 항목 간에 균등하게 효과적으로 분배하여 마지막 줄까지 포장하여 동일한 크기를 유지합니다.

위 내용은 래핑할 때에도 여러 행에 걸쳐 동일한 너비의 Flex 항목을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!