Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。是一种现代的css布局方式，现在已被大多数主流浏览器所支持。

有关 flex 布局的更多资料，可以自行查阅，本文不做详细说明。本文假设你已经知道了 flex 布局的基本用法。

接下来，请大家看一张图片

请大家注意红色方框选中的位置，这个区域跟左侧的图片是水平对齐的。而且里面包含两部分内容，分别处于顶部和底部。如果只用 flex 布局，能不能做到这样的效果呢？

接下来我给大家稍作提示

看到这个图，我们很快就可以想到，最接近这个效果的是 space-between ，可上面图片中的这些都是横向排列的，我们希望的效果是竖向排列的，接下来，我再为大家稍作提示：

我们知道，flex 布局的默认排列方向是从左到右的，如果我们把它的排列方向改成从上到下，然后再借助上面的 space-between 属性，是不是就达到我们的目的了呢？

.right-content{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

答案是肯定的。

最后

有没有感觉这样写，比之前用绝对定位要简单的多呢，如果觉得不错，就收藏起来吧，如果觉得我说的东西比较有用，还可以加个关注