flex 布局也叫做 弹性盒子布局。
    指 父元素在子元素大小不知道的情况下或者子元素动态变化的情况下，依然可以控制子元素的间隙。

    设置为 flex 的容器，默认有两条轴，一条是水平轴，也叫做主轴，另外一条是垂直轴，默认子元素沿着水平轴的方向排列。

    flex 也是有缺陷的，设置flex 布局的容器下面的子元素的 float、vertical-align、clear 属性会失效。

    flex 是 flex-grow、flex-shrink、flex-basis 的简写。
    flex 也可以写成 flex: 0 1 auto;

    1. flex-grow 默认值是0，表示项目的放大比例，在项目有剩余空间的情况下，为0，表示不放大，为1，表示自适应
    2. flex-shrink默认为1，表示项目的缩小比例，当剩余空间不够的时候，默认会缩小，设置成0，不会缩小
    3. flex-basis默认值为 auto，浏览器依靠这个属性判断主轴的空间是否有剩余
    1. // flex: 1
    2. // 等价于
    3. flex-grow: 1;
    4. flex-shrink: 1;
    5. flex-basis: 1;
    7. // flex: 0%;
    8. // 等价于
    9. flex-grow: 1;
    10. flex-shrink: 1;
    11. flex-basis: 0%;
    13. // flex: 24px;
    14. // 等价于
    15. flex-grow: 1;
    16. flex-shrink: 1;
    17. flex-basis: 24px;
    19. // flex: 2 3
    20. // 等价于
    21. flex-grow: 2;
    22. flex-shrink: 3;
    23. flex-basis: 0%;
    25. // flex: 1 0%;
    26. flex-grow: 1;
    27. flex-shrink: 1; // 此时它的默认值为 1
    28. flex-basis: 0%;