显示 flex 将最后一项向左对齐 - CSS

在 CSS 中，我们可以使用 display: flex 声明一个弹性布局，用于改变元素在应用程序中的布局方式。而且，使用 justify-content 和 align-items 可以方便地控制元素列和行的对齐方式。

但有时，我们希望最后一项与其他项对齐方式不同。这时，我们可以使用 margin-left: auto 来实现让最后一项向左对齐。

下面是实现方法和示例代码：

实现方法

我们可以使用如下的 CSS 代码将最后一项向左对齐：

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.container > *:not(:last-child) {
  margin-right: 10px;
}

.container > :last-child {
  margin-left: auto;
}

在上面的代码中，我们首先将容器 container 转换为弹性容器，用于控制所有子元素的布局。然后使用 justify-content: flex-start 和 align-items: center 将子元素列的起始位置设置为容器的起始点和垂直居中。

接下来，使用伪类选择器 :not(:last-child) 为除最后一项外所有子元素添加 margin-right，以便在子元素之间留出间距。最后，使用 margin-left: auto 锁定最后一项的左侧间距，将其向左对齐。

示例代码

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

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.container > *:not(:last-child) {
  margin-right: 10px;
}

.container > :last-child {
  margin-left: auto;
}

在上面的示例中，我们有一个 container 容器，其中包含四个子元素。 Item 4 是最后一个子元素，这里使用了上面的 CSS 代码，将其向最左侧对齐。除此之外，其他三个子元素之间留有 10 像素的右间距。

总结

以上就是如何使用 CSS 的 display: flex 属性设置弹性布局以及利用 margin-left: auto 将最后一项向左对齐的方法。使用这些简单的 CSS 代码，您可以轻松地控制子元素在列和行中的对齐方式，并为您的应用程序提供更好的布局和视觉效果。