flex 项目 三个重要属性

flex-flow 主轴方向与换行方式

• flex-flow: row nowrap; 主轴方向平水对齐 不换行
• flex-flow: column nowrap;主轴方向垂直对齐 不换行
• flex-flow: row wrap; 主轴方向平水对齐 允许换行

设置项目在主轴的对齐方式的前提是：主轴上存在剩余空间否则没有效果。

justify-content 项目在主轴上的对齐方式

• 方式一：将所有项目看成一个整体来处理
• justify-content:flex-start; 默认方式从左对齐
• justify-content:flex-end; 从右对齐
• justify-content:center; 居中对齐
• 
  
• 方法二：将所有项看成一个个独立的个体来处理
• justify-content:space-between; 两端对齐
• justify-content:space-around; 分散对齐
• justify-content:space-evenly; 平均对齐

align-items 项目在竖轴（交叉轴）上的对齐方式

• align-items: stretch;默认拉伸（没有高度时自动填满高度）
• align-items: flex-start; 顶端对齐
• align-items: flex-end; 底端对齐
• align-items: center; 垂直居中对齐

align-content 项目在多行容器中的对齐方式

设置多行项目在主轴是没有剩余空间的，如果需要对齐方式的前提是：交叉轴上要有剩余空间，否则没有效果。

• 方式一：将多行项目看成一个整体来处理
• align-content : stretch;默认拉伸（没有高度时自动填满高度）
• align-content : flex-start; 顶端对齐
• align-content : flex-end; 底端对齐
• align-content : center; 垂直居中对齐
• 
  
• 方式二：将多行项目看成独立个体来处理
• align-content : space-between;二端对齐
• align-content : space-around; 分散对齐
• align-content : space-evenly; 平均对齐