flex 用法：
flex 可以在浏览器里点击就有~
设置了
display: flex的父元素被称之为 flex 容器（flex container），它的子元素都会以 flex 布局。flex-direction: column; 竖直排列
flex-wrap: wrap; 换行
flex: 1; 用于设置动态尺寸，表示占比，和 grid-template-columns 类似，只不过需要去一个个设置（这就体现出 grid 的优越性了不是？）
水平和垂直对齐：
align-items控制 flex 项在交叉轴上的位置。默认的值是stretch，其会使所有flex项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有flex项将变得与最长的flex项一样长（即高度保持一致）。center值会使这些项保持其原有的高度，但是会在交叉轴居中。你也可以设置诸如flex-start或flex-end这样使flex项在交叉轴的开始或结束处对齐所有的值。
justify-content控制flex项在主轴上的位置。默认值是flex-start，这会使所有flex项都位于主轴的开始处。你也可以用flex-end来让 flex 项到结尾处。center在justify-content里也是可用的，可以让flex项在主轴居中。space-around是很有用的——它会使所有flex项沿着主轴均匀地分布，在任意一端都会留有一点空间。还有一个值是space-between，它和space-around非常相似，只是它不会在两端留下任何空间。
