<--------------------------flex布局------------------------------------->
给父盒子添加display：flex，开启flex布局
<---------------------------主轴对齐方式------------------------------------>
justify-content:开启主轴对齐方式，属性名：
flex-start:元素沿着主轴起边排列（不常用）
flex-end:元素沿着主轴终边排列（不常用）
center:元素居中排列（常用）
space-around: 空白分布到元素两侧,两侧空白距离偏小,元素中间空白距离是相加（常用）
space-between:空白均匀分布到元素中间,两边没有空白（常用）
space-evenly:空白分布到元素的单侧,空白距离相同（常用）
<---------------------------副轴对齐方式------------------------------------>
align-items：开启副轴对齐方式，属性名：
stretch：默认值,将元素的长度设置为相同的属性值（不常用）
flex-start：元素不会拉神,沿着副轴起边对齐（不常用）
flex-end：沿着副轴的终边对齐（不常用）
center：居中对齐（常用）
baseline：基线对齐（不常用）
注意点：子盒子如果有高度则按照自己的高度来；子盒子没有高度，会按照父盒子高度进行拉伸；子盒子没有高度，设置了侧轴对齐方式，就是内容高度。
如果行内元素，被开启了flex布局，就可以设置宽高
<---------------------------修改主轴对齐方式------------------------------------>
flex-direction：修改主轴对齐方式，属性名：
row：默认值,弹性元素可在容器中水平排列(左向右)（不常用）
row-reverse：弹性元素在容器中方向水平排列(右向左)（不常用）
column：弹性元素纵向排列(自上向下)（常用）
colum-reverse：弹性元素方向纵向排列(自下向上)（不常用）
<---------------------------溢出换行------------------------------------>
flex-wrap：溢出换行语法，属性：
nowrap，不换行（默认值）；
wrap，换行（常用）
<---------------------------溢出换行以后行与行之间的距离------------------------------------>
align-content：换行以后，行于行之间的距离；
用法和justify-content:的用法一样
<---------------------------覆盖之前的弹性布局样式------------------------------------>
align-self：加属性，给某一个子盒子设置数值
父盒子 子盒子：nth-child（n） {
align-self：样式
}