FLEX布局

一、弹性盒子布局

1.设置并开启弹性盒子布局

.box{

display:flex

}

二、常用属性

1.flex-direction   设置主轴方向 
2.justify-content  设置主轴上的对齐方式 
3.align-items      设置项目在交叉轴上的对齐方式

1.flex-direction 设置主轴方向

①：row：从左向右横向排列
②：row-reverse：从右向左横向排列 
③：column：自上而下纵向排列

④：column-reverse：自下而上纵向排列

2.justify-content  设置主轴上的对齐方式 

①：center:居中对齐

②：space-around:项目之间距离相等

③：space-evenly:间隙相等

④：space-between:两端对齐

3.align-items 设置项目在交叉轴上的对齐方式

①：align-items：baseline    基于第一行文字对齐

②：align-items：center 侧轴的中点对齐