Flex弹性盒子布局（flex-grow、flex-shrink、flex-basis）水平垂直居中、align-content、order、align-self

1.Flex弹性盒子（flex-grow、flex-shrink、flex-basis）

flex-grow：属性规定在相同的容器中，项目相对于其余弹性项目的增长量。

                                就是否将剩余空间填满，默认值0，不填充。

flex-shrink: 属性固定在相同的容器中，项目相对于其余弹性项目的收缩量。

                                就是是否压缩，默认值1，被压缩，0，不被压缩

flex-basis:属性规定弹性项目的初始长度。优先级比width高。

设置宽度，有flex-basis的宽度将覆盖width设置的高度，排不下会被压缩。可以使用flex-shrink不被压缩

2.水平垂直居中

要想使用flex给子盒子在父级盒子里水平垂直居中

第一：display: flex;

第二：justify-content: center;

第三：align-items: center;

<style>
        *{margin:0;padding:0;}
        .box{
            width: 600px;
            height: 500px;
            border:1px solid red;
            display: flex;
            /* 只能实现块元素的水平居中 不能实现垂直居中 */
            margin:0 auto;
            /* 主轴是水平方向 让子盒子在水平方向居中 */
            justify-content: center;
            /* 让子盒子在垂直交叉轴方向居中