常用的flex属性

容器属性

flex-direction: row; // 默认 横向 从左往右依次排列所有项目
flex-direction: row-reverse; // 横向 从右往左依次排列所有项目
flex-direction: column; // 纵向 从上往下依次排列所有项目
flex-direction: column-reverse; // 纵向 从下往上依次排列所有项目

flex-wrap: nowrap; // 默认 一行显示所有项目（项目超出宽度减少项目宽度）
flex-wrap: wrap; //  从左往右显示，宽度不够往下换一行接着显示 (项目超出宽度自动换行)
flex-wrap: wrap-reverse; // 从最下面一行依次从左往右显示，宽度不够往上换行接着显示

flex-flow: column wrap; // 简写(flex-direction/flex-wrap) 从上往下排列 空间不够自动换行

justify-content: center; // 居中对齐
justify-content: space-between; // 第一个项目排在起点 最后一个项目排在终点 均匀排列每个元素
justify-content: space-around;  // 每个元素周围分配相同的空间 均匀排列每个元素

align-items: flex-start; // 垂直方向 顶点对齐
align-items: flex-end; // 垂直方向 底部对齐
align-items: center; // 垂直方向 居中对齐
align-items: baseline; // 垂直以基线对齐

该属性对单行弹性盒子模型无效
align-content: center; // 垂直方向 将项目放置在中点
align-content: space-between; // 第一列项目排在顶点 最后一列项目排在底部 均匀分布项目
align-content: space-around; //  均匀分布项目

 

项目属性

order: 1;     // 定义项目的排列顺序,从小往大的顺序排列 (默认所有项目都是0,order值相同按DOM的顺序依次排列)
flex-grow: 1; // 规定了项目在容器中分配剩余空间的相对比例 (默认都是0,如果有一个项目设置为了1,则该项目分配所有剩余空间,如果有两个项目设置了1,则这两个项目平分所有剩余空间)
flex-basis: 100px; // 设置主轴方向的初始值 (同时给项目设置width/height,flex-basis优先级更高)
align-self: flex-start; // 定义该项目垂直方向的对齐方式 垂直方向顶部对齐