使用flex布局时先对父盒子设置display:flex
1.flex-direction:设置主轴的方向(重要,影响其他参数的布局效果)
属性值 | 含义 |
---|
row | 按行从左到右排列 |
row-reverse | 按照行从右到左排列 |
column | 按照列从上到下排列 |
column-reverse | 按照列从下到上排列 |
2.flex-wrap:设置子元素是否换行
3.flex-flow :flex direction 和 flex wrap 属性的复合属性
/*例如*/
flex-flow:row wrap;
4.justify-content:设置主轴上的子元素排列方式
属性值 | 含义 |
---|
flex-start | 默认值从头部开始 如果主轴是 x 轴,则从左到右 |
flex-end | 从尾部开始排列 |
center | 在主轴居中对齐(如果主轴是x 轴则 水平居中) |
space-around | 平分剩余空间 |
space-between | 先两边贴边再平分剩余空间(重要) |
5.align-items:设置侧轴上的子元素排列方式(单行)
属性值 | 含义 |
---|
flex-start | 默认值从上到下 |
flex-end | 从下到上 |
center | 挤在一起居中(垂直居中,使用较多) |
stretch | 侧轴拉伸至父盒子大小(使用较少) |
6.align-content:设置侧轴上的子元素的排列方式(多行)
属性值 | 含义 |
---|
flex-start | 默认值在侧轴的头部开始排列 |
flex-end | 在侧轴的尾部开始排列 |
center | 在侧轴中间显示 |
space-around | 子项在侧轴平分剩余空间 |
space-between | 子项在侧轴先分布在两头,再平分剩余空间 |
stretch | 设置子项元素高度平分父元素高度 |