flex 弹性布局
弹性盒子是一种用于按行或按列布局的一维布局方法,元素可以膨胀以填充额外的空间,收缩以适应更小的空间
主轴与交叉轴
默认横的主轴,竖的交叉轴
flex 容器
flex 容器:flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content
flex-direction(改变轴方向)
- row 默认,横为主轴
- row-reverse 横主轴反向
- column 设置列为主轴
- column-reverse 列主轴反向
源码预览
打开窗口查看源码
flex-wrap(换行)与 flex-flow(缩写)
flex-wrap
- nowrap 默认,无换行
- warp 换行
- wrap-reverse 反向换行
flex-flow:[flex-direction][flex-wrap]
源码预览
打开窗口查看源码
just-content(主轴对齐)
- flex-start 默认,开头对齐
- flex-end 结尾对齐
- center 中间对齐
- space-around 闲散对齐,开头空隙和结尾空隙 = 中间空隙 / 2
- space-between 两端对齐,开头和结尾无空隙,中间空隙相等
- space-evenly 平均对齐,开头空隙,结尾空隙和中间空隙都相等
源码预览
打开窗口查看源码