css. flex? grid? flexbox의 마지막 행을 정렬하는 몇 가지 방법(펌)

flexbox를 사용하면 특히 그리드의 마지막 행에서 항상 예상되는 정렬이 생성되는 것은 아닙니다. justify-content: space- between 을 사용하면 항목 수가 정사각형이 아닌 한 마지막 행에 큰 간격이 생깁니다.

 

항목 모음이 있다고 가정해 보겠습니다.

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
</div>

각 항목에는 고정된 높이와 너비가 있습니다.

.item {
  width: 100px;
  height: 100px;
  border: solid;
}

그리드에 정렬하려면 flexbox를 사용할 수 있습니다.

.container {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

이것은 실제로 우리가 달성하려는 효과를 제공합니다. 그러나 각 행이 너무 왼쪽 정렬되어 있습니다. 이것은 컨테이너를 시각화할 수 있을 때 분명해집니다.

.container {
  /* ... snip ... */
  border: solid red;
}

많은 경우 오른쪽에 있는 큰 간격을 피하고 항목이 사이에 균등한 간격으로 나타나도록 각 행을 정당화하고 싶을 것입니다.

.container {
  /* ... snip ... */
  justify-content: space-between;
}

이제 새로운 문제가 생겼습니다. 우리가 정의한 것처럼 행의 각 항목 사이에 공간이 있지만 예상한 것과 정확히 같지는 않습니다. 채울 항목이 충분하지 않을 때 마지막 행을 왼쪽으로 정렬하는 것이 일반적인 디자인 패턴입니다.

이것은 정확히 이 스택 오버플로 질문과 많은 중복 질문에 대한 질문입니다.

 

https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid

Flex-box: Align last row to grid

 

허용되는 답변은 을(를) 사용합니다 ::after.

.container::after {
  content: "";
  flex: auto;
}

그러나 여기에서와 같이 고정 너비를 사용하는 경우에는 전혀 좋아 보이지 않습니다.

그리드를 정사각형으로 만들기 위해 항목 추가하기

위 의 블록을 추가하는 대신 ::after다른 접근 방식을 취할 수 있습니다.

그리드가 정사각형이 되도록 다른 항목을 추가합니다. 이러한 항목에 특정 등급을 부여하십시오. 아래의 마지막 항목을 참조하십시오.

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item item-empty"></div>
</div>

아이템도 숨길 수 있습니다.

.item-empty {
  visibility: hidden;
}

이 기술은 항목 수를 알고 있거나 이를 계산하고 항목을 동적으로 추가할 수 있을 때 잘 작동합니다.

CSS 그리드 사용

내가 가장 좋아하는 접근 방식 중 하나는 flexbox를 그리드로 교체하는 것입니다.

원래 세트가 남도록 빈 항목을 삭제합니다.

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
</div>

에서 flexbox CSS를 삭제합니다 .container. 즉, 다음을 모두 삭제합니다.

display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;

그리고 다음 그리드 CSS를 추가합니다.

.container {
  /* ... snip ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}

여기에서 열을 100px너비로 정의하기 때문에 다음 줄을 제거할 수 있습니다..item

width: 100px;

그러면 마지막 행이 왼쪽으로 정렬된 멋지게 정렬된 그리드가 남게 됩니다.

 

출처:

https://travishorn.com/some-ways-to-align-the-last-row-in-a-flexbox-grid-720f365dcb16