Flexbox 레이아웃의 마지막 행을 왼쪽 정렬하는 방법은 무엇입니까?

Flexbox에서 마지막 행 왼쪽 정렬

Flexbox는 다양한 콘텐츠 배열을 가능하게 하는 강력한 레이아웃 도구입니다. 그러나 여러 줄의 Flexbox를 처리할 때 정렬을 유지하는 것이 어려울 수 있습니다. 이 문서에서는 Flexbox의 마지막 행/라인을 왼쪽 정렬하여 일관된 그리드형 레이아웃을 보장하는 문제를 다룹니다.

이 문제는 마지막 행에 다른 행과 동일한 수의 요소가 포함되어 있지 않을 때 발생합니다. 센터링을 유발하고 그리드 효과를 깨뜨립니다. 이를 해결하기 위해 전략적으로 배치된 빈 공간 채우기 요소를 사용하는 솔루션이 제안됩니다.

HTML에서 "filling-empty-space-childs" 클래스를 사용하여 3개의 빈 div를 만듭니다. 이러한 요소의 너비는 하위 요소의 너비와 동일하고 높이는 0이어야 합니다. 이러한 요소는 마지막 행을 왼쪽으로 정렬하는 데 중요한 역할을 합니다.

Flexbox 컨테이너에는 다음 속성이 있어야 합니다.

• 디스플레이: flex
• flex-wrap: Wrap
• justify-content: space-around

개수에 따라 다름 마지막 행의 요소, 빈 공간을 채우는 요소는 새 행에서 축소되어 보이지 않게 유지되어 마지막 줄이 왼쪽에 정렬된 상태를 유지합니다.

예는 다음과 같습니다.

<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>

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

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

.filling-empty-space-childs {
  width: 130px;
  height: 0;
}</code>

이 기술을 구현하면 마지막 줄/행이 왼쪽 정렬되어 다른 행과 다른 수의 요소가 포함된 경우에도 원하는 그리드 효과가 유지됩니다.

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