摘要
关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。
这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。 重点在于理解，而非去死记硬背。
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 属性里面
8.总结
1.flex 只能对它子元素起作用，不论是块级还是行内。 但是一定不能对它的子元素的子元素起作用。
2.当我们为父盒子设为 flex 布局以后,子元素的 float,clear 和 vertical-align 属性将失效。
注：但是设置了 flex 的本元素的 float 等属性不会失效！
3.center 居中指的是盒子里面的所有元素堆在一起进行居中，如果中间有 margin 就可以实现分离一点的效果！
并且主轴是相对的！并不一定是水平轴，而所有的属性都是对应主轴或副轴进行设置，并不是对应水平轴或垂直轴！