使用 flex 将最后一项发送到末尾

当我们在进行页面布局时，经常需要使用 flex 布局来对元素进行排列和定位。其中，一个常见的需求是将最后一项发送到末尾，这在导航栏、列表等布局中非常有用。本文将介绍如何使用 flex 来实现这一功能。

代码实现

首先，我们需要用一个 flex 容器来包裹需要排列的元素，并将其设置为 flex 布局。在该容器上设置 display: flex 即可开启 flex 布局。

接着，我们需要使用 flex-wrap 属性使元素换行，并使用 justify-content: space-between 让元素沿着主轴（默认为水平方向）平均分布。此时，最后一项会被挤到行的末尾。

最后，我们只需将最后一项设置为 margin-left: auto，使其距离左侧的元素顺移，并沿着主轴向右移动。这样，最后一项就被发送到了末尾位置。

下面是一个示例代码：

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

.item:last-child {
  margin-left: auto;
}

示例效果

总结

使用 flex 将最后一项发送到末尾可以轻松实现元素布局的需求。通过 flex 容器的 justify-content 属性和最后一项元素的 margin-left 样式，我们可以实现这一功能。希望本文能够帮助你更好地理解和使用 flex 布局。