display:flex 指定 HTML 元素盒子类型为弹性 若子元素实际的总宽度大于父元素，所有子元素会自动缩小相应比例来填充父元素
flex-direction 子元素的排列方向 row | column
justify-content 子元素在主轴方向上的对齐方式 center | space-between | space-around | flex-start | flex-end
align-items 子元素在侧轴方向上的对齐方式 flex-start | flex-end | center | baseline | stretch
flex-wrap 是否换行 wrap | nowrap
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐（设置子元素集合在垂直方向的对齐方式）
flex-start | flex-end | center | space-between | space-around | stretch（各行将会伸展以占用剩余的空间）
order 设置子元素排列顺序
flex 设置弹性盒子的子元素如何分配空间。 flex:1 可以使盒子占满剩余空间
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
给弹性盒子里的子元素 设置"margin"值为"auto"值，会自动获取弹性容器中剩余的空间