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(反方向排列)