1.标准流

2.浮动(了解)
作用:让块元素水平排列
属性名:float
属性值:left、right
浮动后的盒子顶对齐、具备行内块特点、脱标

2.1 利用浮动实现产品布局效果

2.2 清除浮动
- 如果粉色盒子(父级)不给height的话,红色盒子会浮动到最上面

2.2.1 解决方法


2.3 总结

3.Flex布局
3.1 认识Flex

3.2 Flex组成

3.3 Flex布局

3.3.1 主轴对齐方式
1.around:两侧间距是空白的一般
2.evenly:两边距离=box之间距离

3.3.2 侧轴对齐方式



3.3.3 修改主轴和侧轴位置
-
只记住column就行
-
所以使用justify-content和align-item时,不能说控制的是水平或垂直方向,而是要看主侧轴。


3.3.4 弹性伸缩比


3.3.5 弹性盒子换行


3.3.6 行对齐方式


4.案例
