여러 줄 Flexbox 레이아웃에서 마지막 줄을 왼쪽 정렬하는 방법은 무엇입니까?

여러 줄 Flexbox에서 마지막 줄 왼쪽 정렬

Flexbox 레이아웃에서 마지막 줄을 왼쪽에 정렬하면 다음과 같은 경우 문제가 발생할 수 있습니다. 마지막 줄에는 다른 줄과 동일한 수의 요소가 포함되어 있지 않습니다. 이러한 불규칙성은 원하는 그리드 효과를 방해합니다.

이 문제를 해결하기 위해 "filling-empty-space-childs" div를 사용하는 기술을 사용할 수 있습니다. 이러한 div는 높이가 0이므로 레이아웃에 영향을 주지 않고 새 줄로 축소할 수 있습니다.

다음 HTML 코드를 고려하세요.

<code class="html"><div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

    <div class="filling-empty-space-childs"></div>
    <div class="filling-empty-space-childs"></div>
    <div class="filling-empty-space-childs"></div>

</div></code>

및 해당 CSS:

<code class="css">.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

.filling-empty-space-childs {
    width: 130px; /*match the width of the items*/
    height: 0;
}</code>

이 솔루션에서는 "filling-empty-space-childs" div가 마지막 줄의 남은 공간을 차지합니다. 마지막 줄에 4개의 요소가 있는 경우 이러한 div는 보이지 않고 공간을 차지하지 않는 새 줄로 축소됩니다. 그러나 요소가 4개 미만인 경우 추가 "filling-empty-space-childs" div는 마지막 요소를 왼쪽에 정렬하여 그리드 효과를 유지합니다.

위 내용은 여러 줄 Flexbox 레이아웃에서 마지막 줄을 왼쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!