「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」 。

这是我第4天更文，也是我在黑马学习的第40天，不知不觉都40天了，总是会很累，毕竟6个月学完前端的课程，每天要接受的新知识太多了，不仅要接受新的知识，还要预习第二天的知识。累是真的累，却也是真的充实。希望自己每天都能更努力一点，多进步一点。不闲聊了，说知识吧~

flex布局：

作用：

更方便的控制父元素里的子元素。（父元素被称为弹性容器，子元素被称为弹性盒子）

设置方式：

找父元素设置display:flex;将父元素的类型转换为弹性容器，弹性盒子就可以自动挤压拉伸

组成部分：

（1）弹性容器（父元素） （2）弹性盒子（子元素） （3）主轴（水平垂直向右） （4）测轴（垂直向下）

主轴对齐方式：：

1.justify-content：

属性值： （1）center：所有子元素沿主轴水平居中显示

（2）space-around：每个子元素左右两边的空白间隙都相等

（3）space-between:两边的子元素贴着父元素的边，中间的空白间隙相等

（4）space-evenly:沿主轴均匀排列，弹性盒子与容器的间距，和盒子与盒子之间的距离相（等间距等分）

以上是子元素给了固定的高，父元素没有高，父元素的高是子元素给撑开的，那如果子元素没有给高，父元素给定了高，就是下面的样子

子元素有一个默认的属性值，会将子元素的高拉的和父元素一样高。（子元素不给宽的话，子元素的宽就是里面的内容给撑开的） align-items：stretch（拉伸） 测轴对齐方式：

2.align-items：

（1）stretch:拉伸（默认值） （2）center：所有子元素沿侧轴居中显示 （3）flex-start:测轴开始的位置对齐 （4）flex-end：侧轴结束的位置对齐

3.align-self：

控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子) （几乎不用）