目录
Flex布局（弹性布局）的特点
1.浏览器提倡的布局模型，页面渲染性很高。
2.布局简单，方便。
3.可以避免浮动脱标的问题。
4.兼容性高（不兼容低版本的浏览器）
Flex布局模型构成
设置方式：
给父元素设置display:flex,子元素可以自动的挤压或拉伸；
组成部分
1.弹性容器（父级，添加了display:flex的盒子）
2.弹性盒子（子级）
3.主轴（默认水平）
4.侧轴 / 交叉轴（默认垂直）
主轴对齐方式
justify-content（添加到弹性容器-父级里）：
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-betwwen | 间距出现在弹性盒子两侧之间 |
| space-around | 间距出现在弹性盒子两侧（视觉效果: 子级之间的间距是父级左右两侧间距的2倍） |
| space-evenly |
父子级间距相同 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
修改主轴方向
flex-direction：
主轴默认是水平方向（x轴）
侧轴默认是垂直方向 (y轴)
| 属性 |
最低0.47元/天 解锁文章
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
