导语：「css」 flex 项目 三个重要属性对齐方式

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; 平均对齐

本文内容由小悦整理编辑！