百分比布局
效果： 宽度自适应，高度固定。
Flex布局
作用：避免浮动布局中脱离文档流现象发生
设置方式：父元素添加 display: flex
1. 变成弹性盒子模型 diaplay:flex
当父元素设置了弹性盒子模型后，所有的子元素
- 会在强制一行上显示
- 子元素可以自由的设置宽度和高度
- 子元素默认宽度 由内容撑开
- 子元素默认高度和父元素等高
主轴对齐方式属性 justify-content
- flex-start 默认值, 起点开始依次排列
- flex-end 终点开始依次排列
- center 居中，沿主轴居中排列
- space-between 两端对齐剩下的盒子平分间隙jcsb
- space-around 每个项目两侧的间隔相等,间隙环绕每一个子元素
- space-evenly 平均分配空间,让所有的间隙都相同
修改侧轴对齐方式属性 align-items
- center 沿侧轴居中排列
- stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
- flex-start 默认值, 起点开始依次排列
- flex-end 终点开始依次排列
伸缩比
- 使用flex属性修改弹性盒子伸缩比
- 属性 ➢ flex : 值;
- 取值分类 ➢ 数值(整数)
- 注意 : 只占用父盒子剩余尺寸
