发布于 

flex布局

父元素常用属性

flex-direction

设置主轴方向

属性值 说明
row 默认从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content

设置主轴上的子元素排列方式

属性值 说明
flex-start 默认从头开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

flex-wrap

设置子元素是否换行

属性值 说明
nowrap 默认不换行
wrap 换行

align-content

设置侧轴上的子元素的排列方式（多行）

属性值 说明
flex-start 默认从侧轴头部开始
flex-end 从侧轴尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度

align-items

设置侧轴上的子元素的排列方式（单行）

属性值 说明
flex-start 默认从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸，和父元素一样高

flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap

子元素常用属性

flex

定义子项目分配剩余空间，用flex来表示占多少份数
flex：<number> /*默认是0*/
值也可以是%相对于父级来说
flex: 20% /*5个一行*/

align-self

允许单个项目与一塔项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto ，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

1
2
3
4
span:nth-child(2){
    /*设置自己在侧轴上的排列方式*/
    align-self: flex-end;
}

order

定义项目的排列顺序
树枝越小，排列越靠前，默认是0
注意：和z-index不一样

1
2
3
4
span:nth-child(2){
    /*排到 span-1 前面*/
    order: -1;
}

参考资料

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章