目标: 能够使用Flex布局模型灵活、快速的开发网页
- Flex布局/弹性布局:
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
- 布局非常适合结构化布局
目标:能够使用Flex布局模型灵活、快速的开发网页
设置方式
- 父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分 - 弹性容器
- 弹性盒子
- 主轴
-
侧轴 / 交叉轴
image.png
主轴对齐方式
使用justify-content调节元素在主轴的对齐方式,在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距.
image.png
侧轴对齐方式
image.png
伸缩比
image.png
