各位大佬晚上好！
愉快的一天从问好开始，今天我为大家带来的时关于弹性布局的小知识点，
首先，我们应该都知道弹性布局的优势是做一维布局，至于为什么，下文有解释哦！
弹性布局之所以叫弹性布局，那是因为在（flex）的子容器可以充分的利用父容器的可用空间。好啦，首先为我们大家带上一张括谱图：
好啦！接下来我们详细的说一下几个我们常用的弹性布局语法。首先是我们的原始代码和显示图：
<style> ul{list-style: none;} a{text-decoration: none;} #box{margin: 20px auto; width: 400px;height: 400px;border: 1px solid black;} #box div{width: 100px;height: 100px;border: 3px solid black;} #box div:nth-of-type(1){background-color: red;} #box div:nth-of-type(2){background-color: green;} #box div:nth-of-type(3){background-color: blue;} </style>
<body>
<div id="box"> <div></div> <div></div> <div></div> </div>
</body
显示图是：
作用在父容器上面
-
flex-direction: 改变主轴的方向
-
justify-content：属性决定了主轴方向上子项的对齐和分布方式。
-
align-items；每一行中的子元素上下对齐方式。就是在副轴上面移动
-
flex-wrap：是否进行换行处理
写在子容器上面的
- align-self；允许单个子容器与其他子容器不一样的对齐方式可以覆盖align-items属性。（这里以第二个盒子为例）
- flex-grow : 扩展；
实例
注：
水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。
当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
小白一枚，欢迎各位大佬指导。
