弹性盒子flex常用方法
注：
横向居中：justify-content:center;
纵向居中：align-items:center;
居中：横向+纵向。
flex-direction 属性——弹性子元素在父容器中的位置。
flex-direction:
row：横向从左到右排列（默认）。
row-reverse：反转横向排列，右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面（新创建的信息排前面）。
justify-content 属性——主轴对齐。
justify-content：
align-items 属性——纵轴对齐。
align-items ：
flex-start：起始靠边对齐。（上）默认
flex-end：末尾靠边对齐。（下）
center：居中。
flex-wrap 属性——弹性盒子的子元素换行方式。
flex-wrap：
nowrap ：弹性容器为单行。该情况下弹性子项可能会溢出容器。（默认）
wrap ：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse ：反转 wrap 排列。
图片来源于：https://www.runoob.com/css3/css3-flexbox.html