css3弹性盒子（一）弹性容器

弹性盒子是css3中最常用的一种布局模块，用于实现盒子里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）, 分配空白空间 。弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。
弹性盒子大致分为两个部分：弹性容器与弹性子元素

弹性容器：

弹性盒子有一个主轴（main axis）和一个纵轴（cross axis），弹性子元素沿着主轴依次排列 ，侧轴垂直于主轴。弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、侧轴结束（cross end）代表了弹性子元素排列的起始和结束位置

弹性容器的属性：

1、flex-direction： row ；（设置主轴方向，确定弹性子元素的排列方式）

• row：默认值，以主轴为水平方向。排序方向与页面的文档顺序相同。如果文档顺序是ltr，则排列顺序 是从左到右；如果文档顺序是rtl，则排列顺序是从右到左
• row-reverse：同样以主轴为水平方向。不过排序方向与页面的文档顺序相反。
• column：主轴为垂直方向。排列顺序为从上到下。
• column-reverse：主轴为垂直方向。排列顺序为从下到上。

2、flex-wrap：nowrap； （当弹性子元素超出弹性容器范围时是否换行）

• nowrap：默认值，溢出时不换行
• wrap ：溢出时自动换行
• wrap-reverse： 溢出时自动换行，翻转排列

3、flex-flow （flex-direction和flex-wrap的快捷方式，复合属性）

• flex-direction ： 设置弹性子元素的排列方式为flex-direction
• flex-wrap ： 设置弹性子元素的排列方式为flex-wrap

4、justify-content （设置弹性子元素主轴上的对齐方式）

• flex-start：默认值 ，主轴开始对齐，主轴为横轴，ltr环境下，左对齐
• flex-end： 主轴结束对齐，主轴为横轴，ltr环境下，右对齐
• center： 居中对齐
• space-between： 第一个、最后一个对齐弹性容器的边缘，其余均匀分布
• space-around 全部均匀分布

5、align-items （设置弹性子元素侧轴上的对齐方式）

• stretch：默认值， 从侧轴开始到侧轴结束铺满整个侧轴
• flex-start： 侧轴开始对齐，主轴为横轴，顶对齐
• flex-end： 侧轴结束对齐
• center： 居中对齐
• baseline： 基线对齐

6、align-content （侧轴上有空白时且有多行时，设置弹性子元素侧轴的对齐方式）

• stretch：默认值，各行伸展以占用剩余空间。如果剩余空间是负数，该值等效于flex-start
• flex-start： 主轴开始对齐，主轴为横轴，ltr环境下，左对齐
• flex-end：主轴结束对齐，主轴为横轴，ltr环境下，右对齐
• center： 居中对齐
• space-between： 第一个、最后一个对齐弹性容器的边缘，其余均匀分布
• space-around ：全部均匀分布