弹性盒子布局:语法
块级元素转换成弹性盒子:{display:flex}
行内元素转换成弹性盒子:{display:inline-flex}
1.flex-direction:用来确认主轴的方向
row(从左向右)相对于row-reverse(从右向左)
column(从上向下)相对于column-reverse(从下向上)
2.flex-wrap:作用于子元素换不换行
nowrap(不换行) wrap(换行,从上往下走)wrap-recerse(换行,从上往下走)
3.justify-content:定义子元素在主轴上对齐的方式
flex-start(左对齐)flex-end(右对齐)center(居中)space-between(两端对齐)space-around(均分对齐)
4.align-items:交叉轴(Y轴)对齐方式
flex-start(交叉轴的起点对齐)flex-end(交叉轴的终点对齐)center(居中)baseline(文字基线对齐)
5.align-content:定义多根轴线的对齐方式
flex-start(起点对齐)flex-end(终点对齐)center(中点对齐)space-between(两端对齐)space-around(每根轴线的两端对齐)