Flex布局
1.Flex布局模型构成
2.主轴对齐方式
- 修改主轴对齐方式属性:justify-content
3.侧轴对齐方式
修改侧轴对齐方式属性:
- align-items(添加到弹性容器)
- align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
4.伸缩比
使用flex属性修改弹性盒子伸缩比
- 属性 flex : 值 ;
- 取值分类 数值(整数)
- 注:只占用复盒子剩余尺寸
5.改变元素排列方向
- 主轴默认是水平方向,侧轴默认是垂直方向
- 修改主轴方向属性:flex-direction
6.弹性盒子换行
- 弹性盒子换行显示:flex-warp : warp ;
- 调整行对齐方式:align-content (取值与justify-content基本相同)