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

Question

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

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

可以选择沿交叉轴覆盖：align-self，但可能不沿主轴。

使用position: absolute执行此操作有什么不好之处：其他元素应该尊重特殊元素，而不是与之重叠。

float的不好之处在于它仅适用于flex-direction: row。

Answer 1

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

Answer 2

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

.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>