弹性盒子是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 ：全部均匀分布