Flex 三列布局中 将最后一列居右显示

下面这张图是我最近项目中遇到的布局效果，很简单对不对？

如果用常规的布局方式，有多种方法，比如 float、display table 等，这里我用到的是flex布局。

我们模拟上图中的三列布局的效果，HTML代码如下：

<div class="flex-box">
  <div class="child red"></div>
  <div class="child green"></div>
  <div class="child blue"></div>
</div>

CSS代码如下：

.flex-box {
  width: 100%;
  height: 200px;
  display: flex;
  background: snow;
}
.child {
  width: 100px;
  height: 100px;
}
.red {
  background: red;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

效果如下，nothing special~

那么最关键的地方来了，怎么让最后一个div居右显示呢？思考1秒钟~⏱

思考结束 😆，好了揭晓答案。

我们知道在flex布局中有一个属性，align-self，它可以使我们的元素在垂直方向设置对齐方式，比如顶对齐：align-self: flex-start,  底对齐：align-self: flex-end等。

当时我就在思考，为什么没有设置水平方向对齐的与align-self 相对应的 justify-self 这样的属性呢?

于是查找资料，便在w3c网站上看到了一则规范, Aligning with ‘auto’ margins，其中有一处提到:

Prior to alignment via ‘justify-content’ and ‘align-self’, any positive free space is distributed to auto margins in that dimension.

翻译过来的意思就是，在通过justify-content和align-self进行对齐之前，任何正的可用空间都会分配到该维度中的自动边距中。结合自己的理解就是，在给flex中的元素设置 margin: auto 时，它就会自动分配剩余空间。

回到我们开始的话题，假如我给最后一个元素设置左边距：margin-left: auto 那么它就会向左自动占用剩余的空间，事实是不是如此呢，我写了个DEMO来验证。

很完美的实现了我们想要的效果~ 🤗

假如我们改变margin值的方向，又或者作用到不同的元素上，那么会有什么不一样的效果呢？动手试试看吧！

PS：justify-self 这个属性并非不存在，只是不属于flex布局的范畴。