반응형 그리드 레이아웃의 마지막 행에만 요소를 중앙에 배치하려면 어떻게 해야 합니까?

마지막 행의 요소 중심 맞추기: CSS 그리드와 Flexbox

딜레마:
CSS 그리드를 사용하여 항목을 정렬할 때 균등하게 간격을 둔 그리드를 사용하면서 여러 요소를 수용하면서 마지막 행에만 요소를 중앙에 배치하려면 어떻게 해야 합니까? 항목이 있습니까?

CSS 그리드에 적합하지 않음:
CSS 그리드는 전체 행이나 열에 항목을 정렬하는 데 적합하지 않습니다. 교차하는 트랙은 원하는 효과를 방해하기 때문입니다.

대안: Flexbox
원하는 센터링을 달성하려면 Flexbox 활용을 고려하세요. justify-content: center. 이렇게 하면 항목이 행 중앙에 수평으로 묶이고 여백이 항목을 밀어냅니다.

역학:
전체 행에서는 justify-content가 효과가 없으므로 항목을 완전히 만듭니다. 여유 공간 없이 정당화됩니다. 그러나 여유 ​​공간이 있는 행(즉, 마지막 행)에서는 항목이 중심으로.

예:

CSS:

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

HTML:

<div>

결과:
함께 이 접근 방식을 사용하면 마지막 행의 항목이 중앙에 배치되고 레이아웃은 다양한 항목 수에 계속 반응합니다.

위 내용은 반응형 그리드 레이아웃의 마지막 행에만 요소를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!