弹性盒子布局display:flex

作用在flex容器上的css 属性
1.flex-direction 用来控制子项整体布局方向
flex-direction: row | row-reverse | column | column-reverse;
row => 默认值 方向为当前文档水平流方向从左向右
row-reverse => 显示为行，方向从右向左
column => 显示为列，上到下
column-reverse => 下到上
2.flex-wrap 用来控制子项整体单行显示还是换行显示
flex-wrap: nowrap | wrap | wrap-reverse
nowrap => 默认值，不换行
如果img图片溢出容器，设置img{max-width:100%}
wrap: 宽度不足换行显示
wrap-reverse：宽度不足换行显示，从下往上
3.flex-flow: 是flex-direction和flex-wrap的缩写
4.justify-content: 水平方向flex子项的对齐和分布方式
flex-start | flex-end | center | space-between |space-between | space-around | space-evenly
flex-start => 左对齐
flex-end => 右对齐
center => 居中对齐
space-between => 两端对齐
space-around => 环绕两侧都有等宽间距 最左右等于中间的一半
space-evenly => 匀称，平等的意思 两侧 空白间距相等
5.align-items 指的是flex子项们相对于flex容器在垂直方向上的对齐方式，大家一起顶部，底部，拉伸对齐
align-items : stretch | flex-start | flex-end |center | baseline
6.align-content ： 垂直方向flex元素对齐和分布方式
align-content: stretch | flex-start |flex-end center | space-between |space-arounnd | space-evenly

flex子项上的css属性
1.order 改变某一个flex子项的排序位置
2.flex-grow: 扩展占用剩余空间，分配剩余空间
flex-grow:1 所有剩余空间都分配
小于1，则去算比例
大于1 所有
（当前也可以在某一个子项元素上去改变其分配的剩余空间）
3.flex-shrink 收缩空间 ，主要处理flex容器空间不足时，单个元素的收缩比例
4.flex-basis: 定义了在分配剩余空间之前元素的默认大小
（当设定元素宽度超出时，剩余空间不足，剩下几个按照1:1收缩）
5.flex 是 flex-grow,flex-shrink,flex-basis 的缩写
6.align-self 控制单独某一个flex子项的垂直对齐方式

https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/#flex-direction