.container{
display: -webkit-flex/inline-flex;
display: -moz-flex/inline-flex;
display: -ms-flex/inline-flex;
display: flex/inline-flex;
}
让元素以flex形式渲染
flex=block
inline-flex=inline-block
flex-direction: row/row-reverse/column/column-reverse;
定义主轴方向
row=从左至右（默认值）
column=从上到下
flex-wrap: nowrap/wrap/wrap-inverse
定义侧轴方向
nowrap=不换行（默认值）
wrap=换行，换行方向与文字排列方向一致
wrap-inverse=与文字排列方向相反
flex-flow: row wrap;
同时定义主轴和侧轴
justify-content: flex-start/flex-end/center/space-between/space-around;
单行内，主轴方向对齐方式
space-between=为元素中间用空白填充
space-around=则在space-between的基础上，开头和结尾元素都留出空白
align-items: flex-start/flex-end/center/baseling/stretch;
单行内，各个元素之间的侧轴方向对齐方式
其中stretch，拉伸元素填满整行
align-content: flex-start/flex-end/center/space-between/space-around/stretch;
多行内容之间，行与行的侧轴对齐方式
以下针对于单一元素进行设定
align-self
覆盖父容器的align-items的设定值，针对单一元素进行设置。
order: <integer>
设定元素的排列顺序
flex: none | initial | auto | [flex-grow flex-shrink || flex-basis] | initial | auto;
initial=在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩
auto=会根据主轴自动伸缩以占用所有剩余空间，非常类似于普通流中的自动外边距
flex-grow=扩展比率。容器空间大于元素所需控件之和的情况下，根据元素的设定值来扩大元素大小以填充剩余空间。0不参与空间分配。
flex-shrink=收缩比率。容器空间小于元素所需空间之和的情况下。根据元素的设定值缩小元素以适应容器大小。0不参与空间分配。
flex-basis=伸缩基准值。各个元素按此值主张自己的大小，容器满足个元素主张大小后：如果有剩余的空间，则按照flex-grow分配剩余大小；如果空间不足以放下所有元素，则差值部分按照flex-shrink缩小各个元素。*此处主张的大小指的是元素的宽和高，如果元素的box-sizing为默认值（content-box），则计算剩余空间或需收缩空间之前要减去padding和border-width。