<!-- 容器属性 -->
<!-- 如果a未开启 flex弹性布局，则内部三个盒子会自上而下排列 -->
<!-- 如果a开启 flex弹性布局，则内部三个盒子会自左向右 -->
<!-- justify-content: center; 沿着横轴方向变化 对其 靠左 靠右 -->
<!-- align-items: center;; 沿着数轴方向变化 对其 靠上 靠下 -->
<!-- flex-direction: row; 按行排列 ，，，如果就是row-reverse，内部项目就是cba,顺序反转-->
<!-- flex-direction: column; 按列排列 ，，，如果就是column-reverse，内部项目就是cba,顺序反转-->
<!-- flex-wrap: nowrap;; 如果项目宽度大于容器宽度，那么项目会等分容器宽度，不换行-->
<!-- flex-wrap: wrap;;; 如果项目宽度大于容器宽度，那么项目会不会等分容器宽度，按照自身宽度排列，，换行-->
<!-- 项目属性 oder,flex ,align-self-->
<!-- flex-grow: 1;,如果三个盒子都使用了，那么自身设置的宽度大小不起作用，，会按照flex-grow:等分父亲的宽度（用于等宽的设置），-->
<!-- flex-basis;盒子的起始大，可以设置大小 -->
<!-- flex-shrink;父元素 在缩小，，子元素等比例缩小，属性值为0的，，就是不可被压缩的-->
<!-- align-self;子元素在竖轴上 利用这个设置可以改变 父元素指定的位置 center,或者flex-end-->
