/*定义当前元素为弹性容器，里面的直接子元素的布局方式为弹性布局*/
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;
注意：弹性布局只跟弹性容器里的直接子元素有关。默认是一行内容，不会换行，会按比例进行压缩。
