1.flex 布局
- 基于 flex 精确灵活控制块级盒子的布局方式,
避免浮动布局中脱标文档流现象的发生
- flex 布局非常适合结构化布局
布局方式
- 父元素添加 display: flex; 子元素可以自动的挤压或拉伸
组成部分
- 弹性容器 父元素
- 弹性盒子 子元素
主轴
默认水平侧轴 / 交叉轴
默认垂直
查看兼容性网站:www.caniuse.com
2.使用 justify-content 调节元素在主轴的对齐方式
属性 作用
center
居中
space-around
间距在子级的两侧(中间大两边小)
space-between
间距在弹性盒子(子级)之间
space-evenly
所有子级盒子的间距一样
3.使用 align-items 调节元素在侧轴的对齐方式
* align-items (添加到弹性容器)
- align-self (添加到弹性盒子)
属性值 作用
center
居中
stretch 默认值,
弹性盒子沿着主轴线被拉伸至铺满容器
使用 flex 属性修改弹性盒子伸缩比
- 属性 :
flex 值
- 取值分类:
数值
(整数)
*注意:只占用父盒子剩余的尺寸
4.使用 flex-direction 改变元素排列方向
- 主轴默认是水平,侧轴默认是垂直方向
- 修改主轴方向属性:
flex-direction
- 属性值:
column
作用:列,垂直
5.使用 flex-wrap 调节元素在主轴的对齐方式
- 弹性盒子换行显示:
flex-wrap: wrap;
- 调整行对齐方式:
align-content