多列交叉轴方向的布局
把多列的item在整体的垂直方向上设置位置 使用align-content
/* align-content: center; */
/* 如果是当个item控制他的垂直方向我们使用align-items */
/* align-items: center; */
/* flex-start 在交叉轴的起始 flex-end 在交叉轴的末尾 */
/* center 在交叉轴的中间 space-between 在交叉轴的两端
space-around 空白环绕 两个项目之间的距离大一倍
stretch 是默认值 要想设置 首先不能设置item的高度 */
/* align-content: space-between; */
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
flex布局item的基本宽度
/* 设置了flex-basis width就不管用了 同时存在的时候，优先使用flex-basis */
/* 如果父元素的宽度太小了，item排列不下 设置的flex-basis的宽度会自动缩小，
直到占满父元素
放大item 均匀占满父元素 */
/* flex-grow: 1; */
/* flex: flex-grow flex-shrink flex-basis*/
flex:1;/* 代表flex: 1 1 auto; */
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间
-
flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。
-
flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。 flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
-
flex-shrink: 1; 默认值，即如果空间不足，缩小。
-
flex-shrink: 0; 不缩小。
