CSS Flexbox wrap – 最后一行不同对齐方式

在本文中，我们将介绍如何使用CSS Flexbox的wrap属性以及如何为最后一行设置不同的对齐方式。

阅读更多：CSS 教程

Flexbox简介

CSS Flexbox（弹性盒子布局）是一种用于构建灵活且自适应的布局模型。它可以使元素在容器内更好地自适应，并且能够轻松控制元素的对齐和分布。

要使用Flexbox布局，我们需要在父容器上应用display: flex样式，这将将其设置为Flex容器。然后，我们可以使用flex-direction属性指定元素的排列方向。

Flexbox Wrap

Flexbox的wrap属性用于控制当容器内的元素过多而无法放置在一行时会发生什么。默认情况下，Flex容器会将所有元素放置在一行上，但当元素过多时，会在宽度不足的情况下自动换行。

例如，考虑以下HTML和CSS代码：

<div class="flex-container">
  <div class="flex-item">元素1</div>
  <div class="flex-item">元素2</div>
  <div class="flex-item">元素3</div>
  <div class="flex-item">元素4</div>
  <div class="flex-item">元素5</div>
  <div class="flex-item">元素6</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 1 1 200px;
  height: 100px;
  margin: 10px;
  background-color: teal;
}

在上面的示例中，.flex-container类应用了display: flex和flex-wrap: wrap属性，使其成为一个Flex容器，并且允许元素在宽度不足时自动换行。

最后一行不同对齐方式

Flexbox还提供了一种方法，可以为最后一行的元素设置不同的对齐方式。这对于创建更灵活的布局非常有用，尤其是在最后一行的元素数量较少或与其他行不同对齐方式的情况下。

要为最后一行设置不同的对齐方式，我们可以结合使用flex-wrap和align-content属性。flex-wrap属性用于控制元素的换行行为，而align-content属性用于设置元素在纵轴方向上的对齐。

例如，考虑以下HTML和CSS代码：

<div class="flex-container">
  <div class="flex-item">元素1</div>
  <div class="flex-item">元素2</div>
  <div class="flex-item">元素3</div>
  <div class="flex-item">元素4</div>
  <div class="flex-item">元素5</div>
  <div class="flex-item">元素6</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.flex-item {
  flex: 1 1 200px;
  height: 100px;
  margin: 10px;
  background-color: teal;
}
.flex-container:last-child {
  align-content: flex-end;
}

在上面的示例中，我们在.flex-container类中应用了align-content: flex-start属性，使得除最后一行外的所有行都在纵轴方向上顶部对齐。接着，我们使用.flex-container:last-child选择器选择了最后一个.flex-container元素，并将其align-content属性设置为flex-end，使最后一行的元素底部对齐。

这样，即使最后一行的元素数量较少，它们也会被自动对齐到容器的底部。