래핑 후 Flexbox에서 일관된 항목 너비를 어떻게 보장할 수 있습니까?

Flexbox 래핑 후 항목 너비 일관성

소개:
CSS에서 Flexbox 레이아웃은 요소에 동적 크기 조정을 제공하여 요소를 정렬할 수 있는 유연성을 제공합니다. 및 포장 기능. 그러나 한 가지 일반적인 문제는 래핑이 발생한 후 동일한 항목 너비를 보장하는 것입니다.

문제:
Flexbox를 사용할 때 항목이 최소 너비를 갖고 다음 항목을 사용할 수 있는 레이아웃을 생성할 수 있습니다. 사용 가능한 공간을 채우기 위해 성장합니다. 그러나 항목이 여러 줄로 줄바꿈되면 마지막 행 항목의 너비가 고르지 않아 바람직하지 않은 모양이 나타날 수 있습니다.

CSS 전용 솔루션:
안타깝게도 순수 CSS는 그렇지 않습니다. 현재 마지막 행의 유연한 항목을 정렬하기 위한 깔끔한 솔루션을 제공합니다. 이는 Flexbox 사양의 범위를 벗어납니다.

대체 접근 방식: CSS 그리드 레이아웃
또 다른 CSS3 기술인 그리드 레이아웃은 이 문제에 대한 솔루션을 제공합니다. 그리드를 사용하면 항목 배치를 보다 정확하게 제어할 수 있으며 마지막 행에서 동일한 항목 너비를 보장할 수 있습니다.

코드:

.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;
}

설명:

• display: 그리드는 그리드를 사용하도록 컨테이너 요소를 설정합니다. 레이아웃.
• grid-template-columns는 그리드의 열을 정의하며 자동 맞춤으로 필요한 만큼의 열을 생성하고 minmax()는 각 열의 최소 및 최대 너비를 설정합니다.
• Grid-auto-rows는 행의 높이를 지정합니다(이 경우 20px).
• grid-gap은 그리드 사이에 약간의 공간을 추가합니다. 항목.

위 내용은 래핑 후 Flexbox에서 일관된 항목 너비를 어떻게 보장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!