flex布局最后一排对齐之左对齐大揭秘

2023-10-07 09:52:04

巧用 Flex 布局：让最后一排元素左对齐不再是难题

在 Flex 布局中，最后一排元素的左对齐是一个常见的难题，尤其是在容器宽度小于元素总宽度的情况下。别担心，让我们来探索三种巧妙的方法来解决这个难题！

方法 1：循环体填充空元素

就像一位熟练的拼图高手，我们可以在容器中放置一个或多个空元素来填充空白。想象一个循环体，它会循环生成空元素，直到容器被填满。在 CSS 中，我们可以让这些空元素的宽度和高度为 0，并设置 flex-grow 属性为 1，让它们按比例填充剩余空间。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  <!-- 循环体生成空元素 -->
  <div class="empty-item"></div>
  <div class="empty-item"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

.empty-item {
  flex-grow: 1;
  width: 0;
  height: 0;
}

方法 2：伪元素撑开空间

有时，空元素并不能完美解决问题，这时我们可以祭出伪元素的大招。伪元素就像元素的影子，它们没有实际内容，但拥有和真实元素相同的布局属性。我们可以创建一个伪元素，让它占据最后一排的空白空间，从而实现左对齐。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  <!-- 伪元素撑开最后一排 -->
  <div class="pseudo-item"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

.pseudo-item {
  flex-grow: 1;
  width: 0;
  height: 0;
}