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