图文讲解flexbox 布局 以及几个高频度属性的深度剖析。

flex布局中，涉及到的CSS属性以及对应的值还是非常多的。但实际应用中，其实只要掌握几个重要的核心属性就可以应付95%以上的场景了。这些属性如下：

display: flex

这个是必须的，但值得注意的是，当声明了容器为flex布局之后。容器内的原有的布局，比如基于BFC和浮动的Layout布局就不起作用了。
下图：两个浮动元素

下图：当使用flexbox，原有浮动布局不生效了。即使我并没有去掉浮动的样式。

flex-direction

flex是基于轴线的，即容器内的元素沿着一条轴线去排列。这条轴线可以是水平的或者垂直的，这条轴线称为主轴。

下图：水平轴线

下图：垂直轴线

有这两个属性，我们已经可以去实现一些基本的布局了。但大部分情况下，我们还需要一些高级的语法。

flex-grow

比如下图，我们希望橙色与蓝色能够各自占据剩下容器的一半。

这里不妨先思考一下。如果你是浏览器，你应该怎么做。其实最主要的是需要制定一个规则，进而实现怎么去撑满整个容器。

规范中的规则是这样的：我们可以看到，容器中出现了剩余的也就是白色的部分。flex布局规则会将剩余的部分按照容器内元素flex-grow的比值进行分配。如果你不写这个值，那么默认就是不分配剩余内容。所以页面默认就是上图显示的样子。

在下图中，我让二者均分剩余的部分。仅需为蓝，橙两个元素分别设置flex-grow: 1

好了，又get到一个技能。我们再接再厉，处理这样的一个场景，这是一个电商的列表页：

上图中，我们希望图片区域是固定宽度的。而后边的描述区域是自适应的。这样的场景是很多见的。比如，你现在正在看的网页，左边的侧边栏是固定宽度的，而右边的内容区域是宽度自适应的。要想实现这样的效果，光靠flex-grow是不够的。

因为容器可能有剩余内容，也可能内容区域根本就不够放下所有元素。这时元素可能会被压缩。

可以看到即使两个元素都设置为了100px，但二者都被压缩了。为了解决这个问题，另一个属性就要登场了

flex-shrink

flex-shink和flex-grow非常类似，都是按照各自的比例去分配，只不过flex-grow是父容器有剩余如何分配，而flex-shrink是父容器不够该如何分配压缩那部分不够的空间(值越大反而被压缩的更多)。

上面的图中我们已经看到二者是均匀分配不够的空间，所以flex-shrink的默认值是1，我们也可以尝试给蓝色的值设为2，这样观察一下效果。
一如所料，但这并非我们要的效果，我们希望蓝色是不变的，当然聪明如你肯定已经想到了，只需要将蓝色的flex-shrink设置为0即可。

好了，到此你已经把flex的几个难点属性研究的差不多了，但还是有一些需要特殊处理一下，比如：

在上图中，我们希望那段文本是垂直居中的。为了解决这个问题，就需要引出另一个概念：交叉轴， 他规定了flex容器内的元素在主轴的垂直方向是如何排列的。

即主轴决定了如何排列或者压缩和拉伸。而交叉轴则确定了元素如何对齐。

上边的例子不容易看出来效果，我将文字所在的div稍微改一下：

align-items

这个新添加的align-self就是决定元素如果在交叉轴上对齐的，分为以下几种情况（你应该能脑补到）：

如上图所示，其实默认的值是stretch，所以当文本内容没有设置高度的时候，就默认在垂直方向上被撑开了。

现在你能感觉到那条交叉轴的存在了吧？

所以说如果面试官问你，flex除了有主轴，还要一条交叉轴，你不要不知道哦。

但其实align-self这个属性可能我们用的并不多，因为这个属性可以继承自容器的aligin-items。通过这个属性，我们就可以统一编排容器内部的所有元素的对齐方式。因为大部分场景都是统一对齐而非上上下下没有章法的…

有了上边主轴与交叉轴的基础，再来说下最后一个属性justify-content

justify-content

相比较于align-items，justify-content这个属性是相对于主轴的排列方式。比如是所有元素靠左，还是所有元素靠右，还是一个用的非常多的场景：space-between均匀分布

额，看起来有些丑，但在比如网站header，或者导航之类的场景是用的很广泛的。

至此，flexbox常用的属性已经介绍的差不多 了，如果你想研究的更深入一些，比如如何使用flex合并多个属性，可以参考下MDN，一不留神说的有点多了，希望本文对你理解flex有所帮助， 谢谢阅读 😃