포장된 후에도 동일한 너비의 Flex 항목을 얻으려면 어떻게 해야 합니까?

Flex 항목을 래핑한 후에도 동일한 너비

CSS 위치 지정 영역에서 Flex 항목을 래핑한 후에도 동일한 너비를 달성하는 것은 어려울 수 있습니다. 강력한 레이아웃 모듈인 Flexbox는 이 시나리오에 대한 기본 솔루션을 제공하지 못합니다.

현재 Flexbox 구현에는 마지막 행이나 열에 유연한 항목을 균등하게 정렬하는 기능이 부족합니다. 이 제한은 현재 사양에 내재되어 있으며 해결되지 않은 상태로 남아 있습니다.

이 문제를 해결하기 위한 보다 심층적인 분석 및 대체 접근 방식은 다음 관련 리소스를 참조하십시오.

• [Sizing flex 마지막 항목 행](https://stackoverflow.com/questions/34259120/sizing-flex-items-on-the-last-row)
• [플렉스 항목이 그 위의 항목에 긴밀하게 정렬될 수 있습니까? ?](https://css-tricks.com/flexbox-tightly-align-last-row/)

그러나 Flexbox 외부에서 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;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

이 CSS 그리드 솔루션을 사용하면 유연한 항목이 여러 줄에 걸쳐 있는 경우에도 동일한 너비로 쉽게 정렬할 수 있습니다. .

위 내용은 포장된 후에도 동일한 너비의 Flex 항목을 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!