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

래핑하는 동안 동일한 너비의 Flex 항목 유지

CSS에서 새 줄로 래핑한 후에도 플렉스 항목이 동일한 너비를 유지하는 레이아웃 구현 , 어려울 수 있습니다.

사용 Flexbox

Flexbox를 사용하면 항목이 동적으로 늘어나 컨테이너 너비를 채우도록 구성할 수 있지만, 특히 마지막 행에서 모든 항목에 대해 동일한 너비를 보장하는 내장 기능은 없습니다. 이러한 제한은 현재 Flexbox 사양의 범위에서 비롯됩니다.

대체 접근 방식: 그리드 레이아웃

또 다른 CSS3 기술인 그리드 레이아웃은 마지막 행 정렬. Grid-template-columns 속성을 활용하면 항목을 여러 줄로 묶는 경우에도 항목을 균등하게 배포할 수 있습니다.

구현

원하는 레이아웃을 얻으려면 :

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

이 코드는 사용 가능한 너비에 따라 자동 열 분포를 사용하여 그리드를 생성합니다. 각 열에는 최소 너비가 100px이고 열의 나머지 공간을 채우기 위해 늘어나는 유연한 너비를 가진 하나 이상의 가변 항목이 포함될 수 있습니다. Grid-auto-rows 속성은 각 행의 높이를 20px로 설정하고, Grid-gap은 항목 사이에 5px의 간격을 추가합니다.

결론

Flexbox는 강력한 레이아웃 도구인 현재 제한 사항으로 인해 마지막 행의 동일한 너비 정렬이 어려워집니다. 고급 기능을 갖춘 그리드 레이아웃은 이러한 시나리오에 안정적인 솔루션을 제공합니다.

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