定义伸缩方向
flex-direction:row; /*默认值；从左到右排列。*/
flex-direction:column; /*从上到下排列*/
定义行数
flex-wrap:nowrap; /*默认值；单行显示*/
flex-wrap:wrap; /*伸缩容器多行显示*/
主轴对齐
justify-content:flex-start; /*默认值；伸缩项目向一行的起始位置靠齐。*/
justify-content:flex-end; /*伸缩项目向一行的结束位置靠齐。*/
justify-content:center; /*伸缩项目向一行的中间位置靠齐。*/
justify-content:space-between; /*伸缩项目会平均的分布在行里。*/
justify-content:space-around; /*伸缩项目会平均的分布在行里，两端保留一半的空间。*/
侧轴对齐
align-item:flex-start; /*伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。*/
align-item:flex-end; /*伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点的边。*/
align-item:center; /*伸缩项目的外边距盒在该行的侧轴上居中放置。*/
align-item:baseline; /*默认值；伸缩项目拉伸填充满整个伸缩容器。*/
伸缩行对齐
align-content主要用来调准伸缩行在伸缩容器里的对齐方式，该属性适用于伸缩容器。类似于伸缩项目在主轴上使用justify-content属性一样，但本属性在只有一行的伸缩容器上没有效果。
align-content:flex-start; /*各行向伸缩容器的起点位置堆叠。*/
align-content:flex-end; /*各行向伸缩容器的结束位置堆叠。*/
align-content:center; /*各行向伸缩容器的中间位置堆叠。*/
align-content:space-between; /*各行在伸缩容器中平均分布。*/
align-content:space-around; /*各行在伸缩容器中平均分布，在两边各有一半的空间。*/
align-content:stretch; /*默认值；各行将会伸展以占用剩余的空间。*/
