弹性盒的属性

定义伸缩方向

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; /*默认值；各行将会伸展以占用剩余的空间。*/