摘要
关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。
这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。
重点在于理解，而非去死记硬背。
1.创建弹性盒子
所有人应该都知道我们应该使用display:flex来创建一个弹性盒子。
但是其实还有另一种创建方式：display:inline-flex。
乍一看这个属性和display:block , display:inline-block是不是有一点点像。
其实效果也是一样的，就是创建出来的盒子是显示为块级元素还是行内块元素。
<style>
.box{
display: flex;
height: 100px;
border: 1px solid black;
}
p{
width: 100px;
height: 50px;
background-color: blue;
margin-right: 10px;
}
</style>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
效果是这样子的：
<style>
.box{
display: inline-flex;
height: 100px;
border: 1px solid black;
}
p{
width: 100px;
height: 50px;
background-color: blue;
margin-right: 10px;
}
</style>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
这里不理解可以参考一下块级元素和行级元素的区别。
2.排列方向（flex-direction）
可以看到，我们上面的盒子设置成了弹性盒子之后，即便盒子内部的元素是块级元素，它们也依旧在按顺序排列着。
也就是，在弹性盒子里面，不管什么元素，元素具有什么样子的特性，都得乖乖的按顺序排列。所以这里就有一个问题，这些元素的排列方式，可不可以由我们来修改呢？
例如我的盒子里面是想着么排列的。
或者我的盒子是想着么排列的。
那肯定是可以的，这里面我们只需要给弹性盒子设置flex-direction这个属性就可以了
这里面不列举这个属性的值，感兴趣可以自己尝试一下。
3.换行（flex-wrap）
对于上面的情况，我们设想一个场景，如果弹性盒子我们设置了width，对于里面的每一个元素也设置了width。
如果按着顺序一直排列，但是盒子的宽度不够了会出现什么情况，里面的元素会冒出去吗？还是会自动的去换行？
答案是，盒子会挤压里面的所有元素让元素不要超出父元素。
但是如果我们给弹性盒子添加了换行的属性flex-wrap后，里面的元素就会自动换行了。
而具体你想换行在上方还是在下方，这里的属性可以自己尝试，就不列举了。
4.调整主轴内容（justify-content）
对于一个已经设置了flex-direction的弹性盒子，我们的效果是这个样子的：
他在排列方向上靠左显示。
但如果我想要的效果是这个样子的：
或者是这几个样子的：
当然也是可以实现的！justify-content这个属性就是用来设置主轴上元素的位置的。
而这个属性的值也是可以实现比上面还多的效果。
5.调整垂直轴内容（align-items）
如果我们把弹性盒子的高度设置的大一点，我们显示的效果是这个样子的：
那如果我想以这几种方式来显示呢？
我们就可以通过align-items这个属性做到，而这个属性就是用来决定垂直轴（和主轴方向垂直的轴）的元素位置。
6.调整垂直内容（align-content）
现在我们想一个问题，align-items和justify-content这两个属性除了作用的轴不同外，效果是不是一样的？
其实仔细想一下，他们两个的效果是不一样的，前者只是决定了垂直轴上的排列的开始位置。
而不能像后者那样能决定出再主轴方向的排列的效果。
所以在垂直轴上有一个属性和justify-content的效果是一样的：align-content
有了这个属性之后，你可以让你的元素这么排列：
也可以这样：
还可以这样：
所以在这里我们要区分align-items和align-content这两个属性
7.弹性元素
上面说的所有属性，都是针对于弹性盒子，也可以说是针对于弹性盒子中的所有元素，不管什么属性大家一起适应。
如果我们想针对于某个弹性元素，给它一些特权，这个也是可以操作的，这里面我用表格来对这三个属性进行展示。
记住，这几个属性不是写在弹性盒子里的css了。是写在某个弹性元素的css属性里面
| 属性 | 作用 | 默认值 |
|---|---|---|
| flex-grow | 当盒子有多余的空间时 ，当前元素相对于其他同辈元素增大的比例 | 0 |
| flex-shrink | 当盒子空间不够时，当前元素相对于其他同辈元素缩减的比例 | 1 |
| flex-basis | 可以设置弹性元素的元素框尺寸 | auto |