学习笔记--flex布局

参考：
https://www.cnblogs.com/xiaobaiv/p/9020335.html

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。

以下6个属性设置在容器上。
flex-direction（主轴方向）
flex-wrap（一条轴线排不下，如何换行，第一行在上面或者在下面）
flex-flow（是flex-direction和flex-wrap的简写）
justify-content（项目在主轴上的对齐方式）
align-items（项目在交叉轴上的对齐方式）
align-content（多条轴线在交叉轴上的对齐方式）

以下6个属性设置在项目上。
order（order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。）
flex-grow（flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。）
flex-shrink（flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。）
flex-basis（定义了在分配多余空间之前，项目占据的主轴空间（main size）跟width或height属性类似）
flex（lex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。）
align-self（align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）