首先开启弹性布局flex:
设置内容排列:
flex-direction: row; | 内容从左到右(默认样式) |
---|
flex-direction: row-reverse; | 内容从右到左 |
flex-direction: column; | 内容从上到下(1、2、3、4、5…) |
flex-direction: column-reverse; | 内容反转从上到下(5、4、3、2、1…) |
设置内容换行:
flex-wrap: nowrap; | 内容不换行(默认样式) |
---|
flex-wrap: wrap; | 内容换行 |
flex-wrap: wrap-reverse; | 内容反转换行 |
横向设置内容:
justify-content: flex-start; | 从左到右对齐 (默认样式) |
---|
justify-content: flex-end; | 从右到左对齐 |
justify-content: center; | 横向内容居中 |
justify-content: space-between; | 两端对齐,内容之间自动分配 |
justify-content: space-around; | 内容自动分配距离 |
竖向设置内容:
align-items: stretch; | 内容没有高度的情况下,占满父容器高度(默认) |
---|
align-items: flex-start; | 竖向内容上方对齐 |
align-items: flex-end; | 竖向内容下方对齐 |
align-items: center; | 竖向内容居中 |
align-items: baseline; | 后面内容根据第一个内容的文字对齐 |
以上内容搞明白基本算够用。
交叉轴设置内容:
align-content属性定义了多根轴线的对齐方式,如果项目只有一根轴线,则该属性不起作用。
align-content: stretch; | 轴线占满整个交叉轴(默认值) |
---|
align-content: flex-start; | 交叉轴的起点对齐 |
align-content: flex-end; | 交叉轴的终点对齐 |
align-content: center; | 交叉轴的中点对齐 |
align-content: space-between; | 交叉轴两端对齐 内容间隔平均分布 |
align-content: space-around; | 每根轴线两侧的间隔都相等 |