flex布局父项常见属性

flex-direction:设置主轴的方向即项目的排列方向

主轴为x轴方向，水平向右； 侧轴为y轴方向，水平向下；

属性值

• row 从左到右 （默认值）
• row-reverse 从右到左
• column 从上到下
• column-reverse 从下到上

justify-content:设置主轴上的子元素排列方式

属性值

• flex-start 从头部开始 （默认值）
• flex-end 从尾部开始
• center 居中对齐
• space-around 平分剩余空间（每个项目左右间隔相同）
• space-between 先两边贴边，再平分剩余空间（头尾项目没有边间距，其他左右间隔相同）

align-items:设置侧轴上的子元素排列方式(单行)

属性值

• flex-start 从头部开始 （默认值）
• flex-end 从尾部开始
• center 居中对齐
• stretch 拉伸（子项目拉伸到和父容器侧轴方向长度一致） justify-content:center和align-items:center结合使用可以实现主轴和侧轴的同时居中，即水平方向和垂直方向上的居中

align-content:设置侧轴上的子元素的排列方式(多行)

只能用于子项出现换行的情况(多行），在单行下是没有效果的。

属性值

• flex-start 从头部开始 默认值
• flex-end 从尾部开始
• center 居中对齐
• space-around 平分剩余空间
• space-between 先两边贴边，再平分剩余空间
• stretch 拉伸

flex-wrap:设置子元素是否换行

属性值

• nowrap 不换行 （默认值）
• warp 换行（不换行项目会全部挤在同一行，项目大小调整）

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

例如flex-flow:row wrap;同时设置flex-direction:row;和flex-wrap:wrap;

flex布局子项常见属性

flex:子项目占的份数

flex属性定义子项目分配剩余空间，用flex表示多少份数

align-self:控制子项自己在侧轴的排列方式

order:定义子项的排列顺序

第一个子项默认order为0