前端提高篇（四十一）CSS进阶8Flex弹性盒子（一）两根轴线，网页前端开发培训班

特点：

---

flex子元素默认情况下不会超出flex容器，不换行（主轴不拉伸，会压缩），设置flex-wrap可以允许换行

1.1 当flex子元素本身是块级元素时，也会变成行级块元素的排列效果

先来看，没有设置flex时：

.wrapper { width: 600px; height: 300px; border:1px solid #000; } .item { width: 100px; height: 150px; } .item:first-child { background: royalblue; } .item:nth-child(2) { background: salmon; } .item:last-child { background: slateblue; }

效果：因为div是块级元素，所以独占一行

当我在.wrapper设置了display : flex;后：

1.2如果没有设置flex，当三个子div的宽度设200px，父div宽度设600px时，会因为html文件里有换行，而增加了两个px，导致一行放不下三个子div

为了让子div横向排列，在.item设置了inline-block，效果如下：

而设置flex就不会有这个困扰，flex是按照自己的轴来严格排列子元素的，写了有什么子元素，什么样式，就严格执行

即使三个子div的总宽度超过了父div，也会等比例缩小子div，让父div能装得下子div

此处设置子div宽度为300px，父div宽度依然600px，结果同上：

重点：两根轴线

---

1.主轴和交叉轴

2.方向

3.起始位置和终止位置

主轴。默认是水平的，从左到右，起始点在最左边，终止点在最右边；也可以设置成从右到左；可以设置成竖直方向的：从上到下或从下到上（flex-direction）

交叉轴：始终与主轴垂直，默认是垂直方向的，

最后

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

开源分享：docs.qq.com/doc/DSmRnRG…