flex布局

flex是弹性布局，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为flex布局

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

容器有6个属性：

• flex-direction ： row | row-reverse | colum | column-reverse
• flex-wrap:  nowap | wrap | wrap-reverse
• flex-flow: <flex-direction> <flex-wrap> 简写形式
• justify-content：flex-start | flex-end | center | space-between | space-around  主轴对齐方式
• align-items：flex-start | flex-end | center | baseline | stretch 交叉轴对齐方式
• align-content：flex-start | flex-end | center | space-between | space-around | stretch （align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）

项目有6个属性：

• order：<integer> 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow： <number> 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink： <number> 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。如果flex-shrink值为0，表示该项目不收缩。
• flex-basis: <length> | auto  定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

• align-self: auto | flex-start | flex-end | center | baseline | stretch; 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex布局详细教程参考flex布局（详解）-CSDN博客