我应该使用什么来通过主轴移动弹性项目？

Question

在flexbox中，有一个align-self属性，可让其通过横轴移动flex项。我听说没有理由自我财产。那么，有什么方法可以使其在弹性商品的主轴上以flex-start / center / flex-end的形式出现？

Answer 1

使用边距。

.container {
  display: flex;
  width: 800px;
  height: 500px;
  background: blue;
}

.child {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: red;
  align-self: flex-end;
}

.child:last-of-type {
  margin-left: auto;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

您可以使用margin-left / right的默认行为来影响单个项目。