百分比布局 目标 了解百分比布局方案 学习内容 特点 流式布局 宽度自适应，高度固定 布局方式 宽度为百分比写法 FLex布局
- 目标 使用Flex布局模型完成网页基本布局效果
- 学习内容
Flex的优势和特点 浏览器提倡的布局模型，页面渲染性能高 布局简单、方便 避免浮动脱标的问题 兼容性较高（不兼容低版本浏览器） - 组成部分 弹性容器（父级， 添加display:flex的盒子） 弹性盒子（子级） 主轴（默认水平） 侧轴（默认垂直）
- 主侧轴对齐方式 主轴
justify-content
center：居中
space-between：间距出现在弹性盒子之间
space-evenly：父子级间距都相同
space-around：间距出现在弹性盒子两侧
视觉效果: 子级之间的间距是父级左右两侧间距的2倍
- 侧轴
align-items（控制所有弹性盒子）
center：居中
stretch：默认值， 拉伸
align-self（控制某个弹性盒子，属性值和align-items一致）
弹性伸缩比
flex: 整数数字;
占用父级剩余尺寸的份数
