精通 CSS 之 align-self

CSS flex 布局中的 align-self 很容易被误用，假如要实现下面的效果：

你可能会写出下面的代码：

<div class="row">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

.row {
  border: 1px solid black;
  display: flex;
  align-items: center;
  width: 200px;
}

.a,
.b,
.c {
  background-color: yellow;
  margin: 5px;
}

.c {
  align-self: flex-end;
}

其实这是不对的，因为你会得到下面的效果：

这个属性是用于覆盖 align-items 的值，控制元素在交叉轴的位置，而非主轴，请看下图：

那你可能会想到用 justify-self: flex-end; 来实现，然而这个属性在 flex 布局下是无效的，那怎么办呢？其实很简单：

.c {
  margin-left: auto;
}

margin 配合 flex 一起使用，会产生很好的布局效果。