`justify-content: space-between`을 사용하여 Flexbox 그리드의 마지막 행에서 균일한 간격을 보장하려면 어떻게 해야 합니까?

Flex-box: 그리드의 마지막 행 정렬

flex-flow가 있는 flex-box 컨테이너에서: 행 줄 바꿈; 및 justify-content: space-between;, 마지막 행 항목이 올바르게 정렬되지 않을 수 있습니다. 이 기사에서는 원하는 간격을 유지하면서 마지막 행을 다른 행과 정렬하는 간단한 솔루션을 살펴봅니다.

이 솔루션은 ::after 의사 요소를 활용하여 컨테이너의 나머지 공간을 자동으로 채웁니다. flex를 할당하면: auto; ::after에서는 HTML에 추가 내용 없이 빈 공간을 채웁니다.

.grid {<br> display: flex;<br> flex-flow: row Wrap;<br> 내용 정당화: 공백 사이;<br>}</p><p>.grid::after {<br> 내용: "";<br> flex: auto;<br>}<br>

이 접근 방식은 HTML 코드에 불필요한 요소를 추가할 필요가 없는 깔끔하고 간단한 솔루션을 제공합니다. http://codepen.io/DanAndreasson/pen/ZQXLXj에서 라이브 데모를 확인하여 그 효과를 확인해 보세요.

위 내용은 `justify-content: space-between`을 사용하여 Flexbox 그리드의 마지막 행에서 균일한 간격을 보장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!