面试题：谈谈对Flex布局的理解

一、概念：flex布局是flexible box的缩写，任何一个容器都可以指定为弹性布局

二、轴线：有两条轴线，即主轴（main axis）和交叉轴（cross axis），可以理解为x，y两个方向，交叉轴（侧轴）是垂直于主轴方向的轴线，主轴轴线是由flex-direction决定的

（1）主轴：flex-direction设为row或者是row-reverse（反方向），你的主轴将沿着x轴方向延伸；设为column或者是column-reverse（反方向），你的主轴将沿着y轴方向延伸

（2）侧轴（交叉轴）：flex-direction设为row或者是row-reverse（反方向），交叉轴就是垂直方向；设为column或者是column-reverse（反方向），交叉轴就是水平方向

三、容器的6个属性：

（1）flex-direction决定主轴的方向，默认值为row 值有row，row-reverse，column，column-reverse

（2）flex-wrap定义了容器内的项目沿着轴线布局时是否换行，默认值为nowrap 值有nowrap ，wrap，wrap-reverse（反向换行，多余的行会逆文档流方向折行显示）

（3）flex-flow是flex-direction和flex-wrap的组合简写

（4）align-items属性可以使元素在交叉方向对齐，默认值为：stretch 值有 stretch（如果项目未设高度或设为auto，将沾满整个容器的高度），baseline（项目第一行文字的基线对齐），flex-start（交叉轴的起点对齐），flex-center，flex-end

（5）justify-content定义项目在主轴的对齐方式，默认值为：flex-start 值为flex-start（从首行起始位置开始排列），center，flex-end，space-around，space-between，space-evenly（兼容性差，iPhone SE不支持）

（6）align-content定义多个项目多根轴线的对齐方式，只有一个轴线时没有作用，也就是说如果成员只有一行那么这个属性就没有什么用，默认值为stretch，值为stretch（轴线占满整个交叉轴）flex-start，flex-end，center，space-between，space-around

四、项目的6个属性

（1）order决定项目在主轴方向上的排列顺序，数值越小，排列越靠前，默认值为零

（2）flex-basis决定了在分配额外空间之前，成员占据的空间，默认值为auto；当一个元素同时被设置了flex-basis和width，flex-basis具有更高的优先级，只有flex-basis设置为auto时，width才会生效

（3）flex-grow决定了对剩余空间的占据量，只有在空间有冗余的时候这一属性才有用。默认值是 0，意思就是即使有多余空间，它也占据。如果给多个成员设置正值，那么他们会根据正值所占的比例的大小分配剩余空间。

（4）flex-shrink 只有在没有额外空间时起作用，意思是没有额外空间时，成员贡献出空间的大小。默认值为 1，如果为 0 意思是不贡献空间，也就是说即使空间不足，成员大小也不发生改变。

（5）flex决定了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。是 flex-grow、flex-shrink和flex-basis 组合简写，默认值为：0 1 auto 。它还有以下2个可选值：auto（等同于flex：1 1 auto 意思就是沾满额外空间，可缩放） none（等同于flex：0 0 auto 意思是不占额外空间，不可缩放）

（6）align-self决定了项目在容器中的对齐方式，并且会覆盖容器已有的align-items的值 ；注意: align-self 属性不适用于块类型的盒模型和表格单元。如果任何项目的侧轴方向 margin 值设置为 auto，则会忽略 align-self。