父容器中写入
.contain{display:flex;} 设定为flex布局
align-items: center 为垂直方向对齐方式
justify-content:flex-start 为水平方向对齐方式
align-content：flex-start； 当子容器多行排列时，设置行与行之间的对齐方式。
flex: 1; flex: 2; flex: 3; 为各子项的伸缩比例。 Flex数值越大伸缩比例越大。
align-self：flex-start 为子项的垂直对齐方式
flex-direction: row 为轴的方向 有向右 向左 向上 向下
flex-wrap：wrap 换行
flex-grow: 1 为子项的放大比例 放大比例 默认是0 当有放大空间的时候，值越大，放大的比例越大
flex-shrink: 为子项的放大比例 缩小比例 默认是1 值越大，缩小的时候比例越小；
转载于:https://www.cnblogs.com/benbenbai/p/10537329.html
相关资源：数据结构—成绩单生成器