flex：弹性布局
设置主轴方向
默认不换行，主轴方向从左到右：flex-direction: row;
颠倒顺序： flex-direction: row-reverse;
主轴方向从上到下：flex-direction: column;
颠倒顺序： flex-direction: column-reverse;
默认情况下，项目都排在一条线（又称"轴线"）上:flex-wrap: nowrap;
换行:flex-wrap: wrap;
上下行颠倒:flex-wrap: wrap-reverse;
复合属性 设置主轴方向和是否换行的:flex-flow:row wrap;
定义了项目在主轴上的对齐方式（应为你的主轴是水平方向的 ）
左对齐:justify-content: flex-start;
右对齐:justify-content: flex-end;
表示水平方向居中：justify-content: center；
flex布局不像绝对定位，脱离文档流，flex布局设置了还是会遵守文档流布局
子元素靠边对齐 两端对齐，项目之间的间隔都相等：justify-content: space-between;
子元素 左右的距离保持一样 相邻子元素之间的距离会变成2倍：justify-content: space-around;
子元素相邻的距离保持一致： justify-content: space-evenly;
定义项目在交叉轴上对齐方式
垂直方向居中：align-items: center;
垂直方向的顶部 交叉轴的起点对齐：align-items:flex-start;
垂直方向的底部 交叉轴的终点对齐：align-items: flex-end;
baseline: 项目的第一行文字的基线对齐，垂直方向按照子元素的文字所在的底部位置进行对齐：align-items: baseline;
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度：align-items: stretch;
