CSS flexbox布局

flexbox：布局是一维布局方式 按行 或 按列排列，解决了 元素分布、对齐、和响应式的问题

 /*设置为 flex  默认子元素会按行排列*/
display: flex; 
/*主轴排列方式*/
justify-content:flex-end;  靠右对齐 
justify-content: center;    居中
justify-content:flex-start;  默认 靠左对齐
Justify-content:space-evenly; 平分空间
Justify-content:space-between; 两端对齐
Justify-content:space-around; 平均分布在该行上，两边留有一半的间隔空间
/*垂直方向对齐*/
align-item:center || flex-end || flex-start;

排列方式
flex-direction: column; 列排列 默认row  rpw-reverse(反方向排列)