超详细！弹性盒子(display:flex)

什么是弹性盒子？

一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你

弹性盒子可以批量式的改变子元素的布局！

那么弹性盒子用在什么地方比较合适呢：
1.当一个盒子里的子元素需要垂直居中一个块的内容
2.当盒子里所有的子元素占用等量的可用宽度/高度时
3.当多列布局中都需要相同的高度(不用理会内容)

所以，弹性布局最适合用在什么地方呢？对！就是我们前端初学并且可能都要一直接触的购物页面。
那些繁琐看起来一样，感觉写起来很简单，但是调起样式来令人头大的购物商品页面，什么左浮动右浮动什么边距我们统统不要，不要1226，不要998，弹性盒子两三句话就可以直接搞定！炒鸡实惠。

如何使用弹性盒子
在刚刚的介绍里面可以发现，很多的描述都有关父子，所以我们弹性盒子的设置，首先就是在父级盒子里面加上display:flex; 来人，上代码。

没人…那我自己来

flex系列
flex系列之flex常用版
首先，这是没有添加弹性盒子的

<style>
    * {
        margin: 0;
        pa