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