弹性盒子布局——共通式样：
一、方式1：旧版方式不推荐
盒子模型弹性布局：flex
子元素排列垂直排列：flex-direction-column
子元素自动占满剩余的空间：flex-1
子元素水平居中：flex-pack-center
子元素垂直居中：flex-align-center
子元素垂直居中+水平居中：flex-center
子元素两端对齐：flex-pack-justify
示例：子元素水平排列，水平和垂直居中。
<div class="flex flex-center">...</div>
二、方式2：推荐方式
flex布局：flex
flex水平排 + 垂直居中 + 水平居中：flex-center
flex水平排 + 垂直居中 + 水平左对齐：flex-justify-start
flex水平排 + 垂直居中 + 水平右对齐：flex-justify-end
flex水平排 + 垂直居中 + 水平两端对齐：flex-justify-between
flex水平排 + 垂直居中 + 水平均匀排列(周围空间相等)：flex-justify-around
flex水平排 + 垂直居中 + 水平均匀排列(间隔相等)：flex-justify-evenly
flex水平排 + 水平居中 + 垂直顶部对齐：flex-align-start
flex水平排 + 水平居中 + 垂直底部对齐：flex-align-end
flex垂直排：flex-col
flex垂直排 + 垂直居中 + 水平居中：flex-col-center
flex垂直排 + 垂直居中 + 水平左对齐：flex-col-justify-start
flex垂直排 + 垂直居中 + 水平右对齐：flex-col-justify-end
flex垂直排 + 垂直居中 + 水平两端对齐：flex-col-justify-between
flex垂直排 + 垂直居中 + 水平均匀排列(周围空间相等)：flex-col-justify-around
flex垂直排 + 垂直居中 + 水平均匀排列(间隔相等)：flex-col-justify-evenly
flex垂直排 + 水平居中 + 垂直左对齐：flex-col-align-start
flex垂直排 + 水平居中 + 垂直右对齐：flex-col-align-end
示例：点击【名称】自动复制名称；点击“盒子”显示源码(源码有加兼容处理，实际引用可不加)