flex-direction属性决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;

flex-direction图解

默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;

justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content图解

align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;

align-item图解

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto

flex-grow

定义弹性盒子项（flex-item）的拉伸因子，默认值0

传统的布局是子容器在父容器中从左到右进行布局，应用 flex 进行布局，那么父容器一定设置 display: flex，子容器要“占有”并且“瓜分”父容器的空间，如何占有、瓜分的策略就是弹性布局的策略。这里就要解释到“剩余空间”的概念：

子容器在父容器的“主轴”上还有多少空间可以“瓜分”，这个可以被“瓜分”的空间就叫做剩余空间。

剩余空间

父容器的主轴还有这么多剩余空间，子容器有什么办法将这些剩余空间瓜分来实现弹性的效果呢？

flex-grow图解

我们发现，子容器的宽度总和只有 350px，父容器宽度为 500px，那么剩余空间就出现了，为 150px。当设置了 flex-grow 之后， A，B，C三个子容器会根据自身的 flex-grow 去“瓜分”剩余空间。

计算方式如下：
剩余空间：x
假设有三个flex item元素，flex-grow 的值分别为a, b, c
每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x
150/6 = 25 => (100+25)px (150+50)px (100+75)px

flex-shrink

如果子容器宽度超过父容器宽度，即使是设置了 flex-grow，但是由于没有剩余空间，就分配不到剩余空间了。这时候有两个办法：换行和压缩。由于 flex 默认不换行，那么压缩的话，怎么压缩呢，压缩多少？此时就需要用到 flex-shrink 属性了。

指定了 flex 元素的收缩规则，默认值是 1

计算方式：
三个flex item元素的width: w1, w2, w3
三个flex item元素的flex-shrink：a, b, c
计算总压缩权重：
sum = a * w1 + b * w2 + c * w3
计算每个元素压缩率：
S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
计算每个元素宽度：width - 压缩率 * 溢出空间

flex-shrink图解

子容器宽度总和为650，溢出空间为150
总压缩：300 * 1 + 150 * 2 + 200 * 3 = 1200
A的压缩率：300*1 / 1200 = 0.25
A的压缩值：150 * 0.25 = 37.5
A的实际宽度：300 - 37.5 = 262.5

如果子容器没有超出父容器，设置 flex-shrink 无效

flex-basis

指定了 flex 元素在主轴方向上的初始大小
一旦 flex item 放进 flex 容器，并不能保证能够按照 flex-basis 设置的大小展示。浏览器会根据 flex-basis 计算主轴是否有剩余空间。既然是跟宽度相关，那么 max-width，min-width，width 的大小优先级是怎么样的。

max-width/min-width > flex-basis > width

转自：蘑菇街前端团队