Flexbox：一种沿主轴对齐单个元素的方法

Question

我想知道是否有一种方法可以覆盖单个元素沿主轴的对齐方式。像这样：

上图中，所有元素都有align-items: flex-start，除了最后一个需要对齐为flex-end，或者space-around。

有一个选项可以沿交叉轴覆盖：align-self，但可能不会沿主轴覆盖。

用 position: absolute 这样做有什么不好：其他元素应该尊重那个特殊的元素，而不是与它重叠。

float 的缺点是它仅适用于 flex-direction: row。

Answer 1

您可以使用设置为 flex-grow: 1 的伪元素并对其进行排序，使其填充元素之间所需的 space。

.flex {
  display: flex;
  height: 100px;
  counter-reset: counter;
}
.flex:before {
  content: '';
  flex: 1 1 auto;
  order: 1;
}
.flex div {
  flex: 0 1 100px;
  background-color: blue;
  margin: 0 1%;
}
.flex div:before {
  counter-increment: counter;
  content: counter(counter);
  color: white;
  line-height: 100px;
  text-align: center;
  display: block;
  font-size: 48px;
  font-family: sans-serif;
}
.flex div:last-child {
  order: 2;
  flex-basis: 50px;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

只需将第 4 个元素的 margin-left 设置为 "auto"。沿主轴对齐项目时，自动边距是可行的方法。

Flexbox：一种沿主轴对齐单个元素的方法

Flexbox: A way to align individual element along main axis

html

css

flexbox