flex布局

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

使用

使用了布局以后，子元素的float、clear、和vertical-align属性将失效
display:flex;
行内元素使用flex布局
display：inline-flex;

基本概念

flex-direction

属性决定主轴的方向

flex-wrap

属性定义，如果一条轴排不下时，该如何换行

nowrap：不换行
wrap：换行
wrap-reverse：第一行在下方

justify-content

定义了项目在主轴上的对齐方式

align-items

定义项目在交叉轴上如何对齐

align-content

定义了多根轴线的对齐方式。如果项目著有一根轴线，该属性不起作用

项目的属性

order（排列顺序）

定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow（放大）

定义项目放大比例

1. 默认为0，即存在剩余空间，也不放大
2. 如果都设置1，则将他们等分空间
3. 如果一个项目的flex-grow属性为2，其项目都为1，则前者占据的剩余空间将比其他项目多一倍

flex-shrink（缩小）

定义项目的缩小比例

1. 默认为1，即当空间不足时，都将等比例缩小
2. 如果设置一个项目的flex-shrink属性为0，其他项目都为1，则前者不缩小

flex-basis（分配多余空间）

定义了在分配多余空间之前，项目占据主轴的空间

1. 默认值为auto，即项目的本来大小
2. 可以设置跟width或height属性一样的值，则项目将占据固定空间

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。