当面试官问道：“ 说一下你对flex（弹性）布局的理解 ”，首先你心中得有个概念，按照怎样的顺序回答这个问题。
严重提示： 某些单词一定要读对了，下文部分单词做了音标注释和链接，不会的点进去听一下发音
一、概念
flex 布局是 flexible box 的缩写 ，意思为 弹性布局 ，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为弹性布局。
二、轴线（重点）
容器默认存在两条轴线，即 主轴（main axis） 和 交叉轴（cross axis） 。
⚠️ 在这里要严正声明一点，好多文章中说是水平的主轴和垂直的交叉轴，这样有点误人子弟了吧！！！（重要的问题叹三遍） 主轴的轴线方向是由
flex-direction决定的，可简单的理解为x（row）和y（column）两个方向，交叉轴是垂直于主轴方向的轴线。所以各位待面试的同学，一定不要被误导，就是主轴和交叉轴！！！（重要的问题叹三遍）
主轴
flex-direction设成row或row-reverse，你的主轴将沿着 x轴 方向延伸。
flex-direction设成column或column-reverse时，你的主轴会沿着 y轴 方向排列。
交叉轴
flex-direction设成row或row-reverse的话，交叉轴就是垂直方向。
flex-direction设成column或者column-reverse，交叉轴就是水平方向。
三、属性
可以从两个维度解释：一种是按照 轴线 的维度解释，另一种是按照 容器和项目 的维度解释。但这里还是建议同学们按照 容器和项目 的维度解释，这样更容易表达。
容器的6个属性
flex-direction
flex-direction 决定主轴的方向（即项目的排列方向），默认值为：row 。它有以下四种可选值：
flex-direction: row; // (默认值) 主轴水平方向，从左往右
flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左
flex-direction: column; // 主轴为垂直方向，从上往下
flex-direction: column-reverse; // 主轴为垂直方向的逆方向，从下往上
flex-wrap（wrap读音：ræp）
flex-wrap 定义了容器内的项目沿轴线布局时是否换行，默认值为：nowrap 。它有以下三种可选值：
flex-wrap: nowrap; // （默认值）不换行，强制一行展示
flex-wrap: wrap; // 换行，多余的行会正常文档流折行显示
flex-wrap: wrap-reverse; // 反向换行，多余的行会逆文档流方向折行显示
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 属性的组合简写：
flex-flow: row nowrap; // （默认值）
align-items（align发音：əˈlaɪn）
align-items 属性可以使元素在交叉轴方向对齐。默认值为：stretch 。它有以下5个可选值：
align-items: stretch;// （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。
align-items: baseline;// 项目的第一行文字的基线对齐。
align-items: flex-start;// 交叉轴的起点对齐。
align-items: center;// 交叉轴的中点对齐。
align-items: flex-end;// 交叉轴的终点对齐。
justify-content（justify发音：ˈdʒʌstɪfaɪ）
justify-content 定义了项目在主轴上的对齐方式，默认值为：flex-start 。它有以下5个可选值：
justify-content: flex-start;// （默认值）从行首起始位置开始排列。
justify-content: center;// 居中排列。
justify-content: flex-end;// 从行尾位置开始排列。
justify-content: space-around;// 均匀排列每个元素，每个元素周围分配相同的空间。
justify-content: space-between;// 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
align-content
align-content 定义多个项目多根轴线的对齐方式，只有一个轴线时没有作用，默认值为：stretch 。它有以下5个可选值：
align-content: stretch; // （默认值）轴线占满整个交叉轴。
align-content: flex-start; // 与交叉轴的起点对齐。
align-content: center：// 与交叉轴的中点对齐。
align-content: flex-end：// 与交叉轴的终点对齐。
align-content: space-between：// 与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content: space-around：// 每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍。
项目的6个属性
order
order 决定项目在主轴方向上的排列顺序，数值越小。排列越靠前。
flex-basis（basis发音：ˈbeɪsɪs）
flex-basis 决定了在分配额外空间之前，成员占据的空间，默认值为 auto。
注意: 当一个元素同时被设置了
flex-basis(除值为auto外) 和width(或者在flex-direction: column情况下设置了height) ,flex-basis具有更高的优先级.
flex-grow
flex-grow 决定了对剩余空间的占据量，只有在空间有冗余的时候这一属性才有用。默认值是 0，意思就是即使有多余空间，它也占据。如果给多个成员设置正值，那么他们会根据正值所占的比例的大小分配剩余空间。
flex-shrink（shrink发音：ʃrɪŋk）
flex-shrink 只有在没有额外空间时起作用，意思是没有额外空间时，成员贡献出空间的大小。默认值为 1，如果为 0 意思是不贡献空间，也就是说即使空间不足，成员大小也不发生改变。
flex
flex 决定了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。是 flex-grow、flex-shrink和flex-basis 组合简写，默认值为：0 1 auto 。它还有一下2个可选值：
flex: auto; // 等同于 flex: 1 1 auto; 意思就是占满额外空间，可缩放。
flex: none; // 等同于flex: 0 0 auto; 意思是不占额外空间，不可缩放。
align-self
align-self 决定了项目在容器中的对齐方式，并且会覆盖容器已有的 align-items的值。
注意:
align-self属性不适用于块类型的盒模型和表格单元。如果任何项目的侧轴方向margin值设置为auto，则会忽略align-self。
总结
面试过程中要抓住面试官问题的重点回答，言简意赅，毕竟时间有限，虽然上文啰啰嗦嗦写了很多，但是千万不要赘述，能提炼的就提炼！
建议:
概念 -> 轴线 -> 属性这个顺序回答。
如果其他小伙伴有不同见解，欢迎评论区留言讨论。
