1.使用弹性盒模型
父元素必须要加display:flex|inline-flex
2.容器属性
- justify-content 主轴对齐
justify-content: flex-start左对齐 | flex-end 右对齐 | center居中 | space-between两端对齐 | space-around分散对齐
- align-items 侧轴对齐(单行)
align-items: start 顶端对齐 | end 底端对齐| center垂直居中 | baseline 基线对齐| stretch填充
- align-content 侧轴对齐(多行)
align-content: flex-start 顶端对齐 | flex-end 底端对齐| center 垂直居中 | space-between 垂直两端对齐 | space-around 垂直分散对齐| stretch 分散对齐(贴合顶端)
- flex-direction 排列方向
flex-direction: row 行| row-reverse 行反转 | column 列| column-reverse 列反转
- flex-wrap 换行
flex-wrap: nowrap 单行伸缩| wrap 一行 | wrap-reverse 反向一行
- flex-flow 复合简写
flex-flow: <flex-direction> <flex-wrap>