一、布局方式
弹性布局
1. 主轴相关
改变主轴方向:flex-direction:column(垂直向下),row(默认值,水平向右)
主轴子元素排列方式:justify-content
- flex-start :以主轴开始点对齐
- flex-end:以主轴结束点对齐
- center:以主轴中心点对齐
- space-around:平分剩余空间(总空间 - 盒子总共占用的空间)
- space-between:先两边贴边,再分配剩余空间
flex:1 -> 可以占满剩余空间
2. 侧轴相关
单行侧轴对齐方式:align-items
- flex-start:从侧轴开始位置对齐
- flex-end:向侧轴结束位置对齐
- center:以侧轴中心位置对齐
- stretch(默认值):
- 子盒子拉伸
- 子盒子未设置高度有拉伸效果,一直拉到底;否则以设置的高度为准
多行侧轴对齐方式:align-content
让多行贴靠在一起移动
- flex-start:向侧轴开始位置对齐
- flex-end:向侧轴结束位置对齐
- center:以侧轴中心位置对齐
- stretch:子盒子高度平分父盒子高度
- space-around:空白环绕子盒子
- space-between:空白填充子盒子
3. 是否换行
- flex-wrap:nowrap:不换行(默认值);wrap:换行