将容器变为弹性盒子
div{
display:flex;
}
弹性盒子容器属性
flex-direction
这个属性规定了弹性盒子的主轴方向
flex-direction: row | row-reverse | columns | columns-reverse;
分别表示：横向(从左到右) |横向(从右到左)|纵向(从上到下)|纵向(从下到上)
flex-warp
这个属性规定了当元素超出容器时的排列方式
flex-warp: nowarp | warp | warp-reverse;
分别表示：不换行|换行(按照行顺序从上到下排列)|换行(按照航顺序的倒叙从上到下排列)
flex-flow
此属性是 flex-direction 和 flex-warp 的复合属性
flex-flow: <flex-direction> || <flex-warp>;
此属性的默认值是 row nowarp
justify-content
此属性表示容器的空余位置在子元素周围的排列方式
justify-content: flex-start | flex-end | center | space-between | space-around;
分别表示：
空余区域在最后一个子元素的右侧 |
空余区域在第一个子元素的左侧 |
空余区域均匀的在子元素的左右两边 |
空余区域均匀的出现在子元素之间 |
空余区域均匀的出现在子元素之间
align-items
此属性规定了子元素在交叉轴上的排列方式（指定的主轴为横轴时，交叉轴就是纵轴）
align-items: flex-start | flex-end | center | baseline | stretch(默认值);
分别表示：
交叉轴的起点开始
交叉轴的终点开始
居中
基于文字基线照齐
如果子元素没有设置高度，则会将其拉伸为父容器的高度
align-content
此属性规定了当有多条轴(也就是多行)时元素在交叉轴上的排列方式
align-content: flex-start | flex-end | center | space-between | space-around | strentch(默认值);
分别表示：
与交叉轴的起点对齐
与交叉轴的终点对齐
与交叉轴的中点对齐
与交叉轴的两点对齐，空余区域均匀的分布在轴线两侧
每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
轴线占满整个交叉轴
子元素的属性
order
此属性表示元素的位置，值越小，越靠前，默认为 0 (可以用来调整子元素的位置)
order: 整数
flex-grow
此属性表示子元素的放大比例，默认为 0 ，即即使有剩余空间也不放大（如果你想让某些子元素占用剩余空间）
flex-grow: 整数
flex-shrink
此属性表示子元素的缩小比例，默认为 1，即：如果空间不够，所有元素等比缩小，如果有个元素为 0 ，则只这个元素缩小（不允许为负数）
flex-shrink: 整数
flex-basis
此属性表示子元素占据的主轴空间，相当于给这个元素设置了 height/width。默认值是 auto 表示的是元素本身大小
flex-basis: <length> | auto; /* default auto */
flex
此属性时 flex-grow，flex-shrink，flex-basis 三个属性的简写方式。默认值是 1 0 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值 auto（1 0 auto）和 none (0 0 auto)
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: flex-start | flex-end | center | baseline | stretch;
参看连接：
- 阮一峰博客Flex 布局教程：语法篇
