Flex弹性布局

一、常见父级项属性

• 通过父盒子设置 display: flex; 来控制子盒子的位置和排列方式

display: flex;

• 设置主轴方向

flex-direction:row;  // 从左到右（默认值）
flex-direction: row-reverse;  // 从右到左
flex-direction: column;  // 从上到下
flex-direction: column-reverse;  // 从下到上

• 设置主轴上的子元素排列方式

justify-content: flex-start;  // 从头部开始，如果主轴是x轴，则从左到右（默认值）
justify-content: flex-end;  // 从尾部开始
justify-content: center;  // 在主轴居中对齐，如果主轴是x轴，水平居中
justify-content: space-around;  // 平分剩余空间
justify-content: space-between;  // 两边贴边，再平分剩余空间（常用）

• 设置子元素是否换行

flex-wrap: nowrap;  // 子元素不换行（默认值）
flex-wrap: wrap'  // 子元素换行

• 设置侧轴上的子元素的排列方式（单行）

align-items: flex-start: 侧轴，从上到下
align-items: flex-end: 侧轴，从下到上
align-items: center: 在侧轴，居中对齐
align-items: stretch: 拉伸（子盒子不要有高度）
align-items: baseline:  // 项目的第一行文字的基线对齐

• 设置侧轴上的子元素的排列方式（多行）

align-content: flex-start;  // 侧轴，从上到下
align-content: flex-end;  // 侧轴，从下到上
align-content: center;  // 在侧轴，居中对齐
align-content: stretch;  // 侧轴，子元素高度评分父元素高度
align-content: space-around;  // 侧轴，平分剩余空间
align-content: space-between;  // 侧轴，子元素分布两边在平分空间

• 复合属性，相当于同时设置 flex-direction 和 flex-wrap

flex-flow: column wrap;

注意：Flex布局中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素内。

二、常见子元素属性

• flex: 定义子元素分配剩余的空间，表示占有多少份

flex: 1;  // 占有一份

• align-self: 控制子元素在侧轴的排列方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;
// 排除auto，其他都与align-items属性完全一致

• order: 定义子元素的排列顺序（前后顺序）

order: 0;  // 数值越小，排列越靠前，默认为0。

• 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-grow: 0;  // Number,剩余空间分配

• 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

 flex-shrink: 0;  // Number,空间不足,按比例缩小

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

flex-basis: ;  // 
flex-basis: <length> | auto;  // 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。