Flexbox에 있는 항목의 마지막 행을 `justify-content: space-between;`으로 정렬하려면 어떻게 해야 합니까?

Flex-box를 사용하여 마지막 행 항목 정렬

Flex-box 레이아웃은 콘텐츠를 유연하게 정렬할 수 있는 것으로 알려져 있습니다. flex-flow를 사용하여 정렬된 항목이 있는 flex-box 컨테이너가 있는 시나리오에서는: row Wrap; justify-content: space-between;, 마지막 행의 항목을 다른 항목과 정렬해야 하는 상황이 발생할 수 있습니다.

justify-content: space-between으로 정렬 달성 ;

justify-content의 사용을 유지하면서 이 정렬을 달성하려면: space-between; 조정 가능한 그리드 크기의 경우 다음 방법을 활용할 수 있습니다:

 display: flex;<br> flex-flow: row Wrap;<br> justify-content: space-between;<br> }</p><p>.grid::after {<br> content: "";<br> flex: auto;<br>}<br>

이 CSS 코드는 보이지 않는 요소(::after)를 컨테이너에 추가합니다. 이 요소는 컨테이너의 나머지 공간을 차지하여 마지막 행의 항목을 다른 항목과 효과적으로 정렬하는 동시에 다른 행에 대해 원하는 분포를 유지합니다.

예

마지막 행 항목을 "중간 열"에 정렬해야 하는 다음 예를 고려하세요.

 표시: flex;<br> 플렉스 흐름: 행 줄 바꿈;<br> justify-content: 공백 사이;<br>}</p><p>.grid::after {<br> content: "";<br> 플렉스: 자동;<br>}</p><p>.item {<br> 너비: 100px;<br> height: 100px;<br> background-color: #ccc;<br>}<br>

이 코드는 항목이 여러 항목으로 래핑된 플렉스박스 컨테이너를 만듭니다. 행. ::after 요소는 마지막 행 항목이 다른 행 항목과 정렬되도록 보장하여 컨테이너 너비가 변하더라도 다른 행의 분포를 유지합니다.

위 내용은 Flexbox에 있는 항목의 마지막 행을 `justify-content: space-between;`으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!