弹性布局

display : flex 给一个盒子设置弹性布局，设置以后，会有许多弹性布局设置的默认值就会添加进来，具体表现为，内部的盒子会并排放置

主轴方向：默认为X轴，可以修改
副轴方向：默认为Y轴

属性名
justify-content: 设置主轴排列方式
属性值
center : 在主轴方向居中显示
flex-start : 在主轴起点方向排列 默认值
flex-end : 再主轴终点方向排列
space-around : 元素和元素之间有间隙 两端也有 而且 元素间的间隙是两端的两倍
space-between : 只有元素与元素之间有间隙 两端没有

属性名
align-items: 设置副轴排列方式
属性值
center : 副轴方向居中显示
flex-start : 在副轴起点方向排列 如果没有给副轴方向大小 那么副轴方向大小就是有内容撑开
flex-end : 在副轴终点方向排列
stretch : 默认值 如果没有给副轴大小 那么铺满父元素的整个副轴方向
如果给了副轴方向大小 效果和flex-start一样

属性名
justify-content: center; 修改主轴方向为Y轴
属性值
row x轴方向 默认值
column y轴方向
row-reverse x轴负方向
column-reverse y轴负方向

属性名
align-self: flex-start; 修改单个元素在副轴方向的排列
属性值
flex-start 开头位置
center 居中位置
flex-end 末尾位置
stretch 默认值

属性名 （设置在子元素）
flex 数值 设置盒子中子元素的位置占比

属性名（设置在父元素）
flex-wrap: wrap; 允许换行
通常是在子元素有宽高的情况下使用，同时不常使用flex来占比（换行与占比冲突，产生不会换行的状态）