CSS中弹性布局设置

                     /*定义当前元素为弹性容器，里面的直接子元素的布局方式为弹性布局*/

                      display:flex;

                      /*弹性布局主轴的方向

                       flex-direction: row;

                       row：主轴为水平方向，从左往右的方向

                       column：主轴为竖直方向，从上往下的方向

                       row-reverse：主轴为水平方向，从右往左的方向

                       column-reverse：主轴为竖直方向，从下往上的方向

                       * */

                      flex-direction:row;

                      /*设置弹性子元素在主轴方向的布局分布

                       justify-content: flex-start

                       flex-start:子元素靠近主轴开端

                       flex-end：子元素靠近主轴结束端

                       center：子元素在主轴居中

                       space-around：平均分布，2边的间隔是中间的一半

                       space-between：平均分布，2边没有间隔

                       space-evenly:平均分布，间隔都是一致的。

                       * */

                      justify-content:space-evenly;

                      /*

                       设置弹性子元素侧轴的分布

                       flex-start:靠近侧轴开端

                       flex-end：靠近侧轴结束端

                       stretch:拉伸（默认值），如果有设置高度，效果如flex-start

                       center:居中

                       * */

                      align-items:center;

                      /*设置允许弹性子元素换行

                       flex-wrap: nowrap;

                       nowrap:默认，不换行

                       wrap:换行

                       * */

                      flex-wrap:wrap;

                      /*

                       多行内容的侧轴布局

                       flex-start:靠近侧轴开端

                       flex-end：靠近侧轴结束端

                       stretch:拉伸（默认值），如果有设置高度，效果如flex-start

                       center:居中

                       space-around：平均分布，2边的间隔是中间的一半

                       space-between：平均分布，2边没有间隔

                       space-evenly:平均分布，间隔都是一致的。

                       * */

                      align-content:space-between;

注意：弹性布局只跟弹性容器里的直接子元素有关。默认是一行内容，不会换行，会按比例进行压缩。