flex弹性布局 基础设置

<!-- 容器属性 -->

<!-- 如果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-->