设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效
flex-direction：主轴(横轴)方向
.container { flex-direction: row | row-reverse | column | column-reverse; /* 主轴方向：水平由左至右排列（默认值） | 水平由右向左 | 垂直由上至下 | 垂直由下至上 */ }flex-warp：换行方式 wrap-reverse:执行换行，第一行在最下方。默认情况下，项目都排在一条线（又称"轴线"）上。
.container { flex-wrap: nowrap | wrap | wrap-reverse; /* 换行方式：不换行（默认值） | 换行 | 反向换行 */ } //flex-flow flex-flow属性是flex-direction属性和flex-wrap的简写justify-content：定义了子元素在主轴(横轴)上的对齐方式
.container { justify-content: center | flex-start | flex-end | space-between | space-around; /* 主轴对齐方式：居中 | 左对齐(默认值) | 右对齐 | 两端对齐(子元素间边距相等) | 周围对齐(每个子元素两侧margin相等） */ }align-items：定义了定义项目在交叉轴(竖轴)上对齐方式
.container { align-items: center | flex-start | flex-end | baseline | stretch; /* 侧轴对齐方式：居中 | 上对齐 | 下对齐 | 项目的第一行文字的基线对齐 | 如果子元素未设置高度，将占满整个容器的高度（默认值） */ }align-content：只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果）
.container { align-content: center | flex-start | flex-end | space-between | space-around | stretch; /* 默认值：与交叉轴的中点对齐 | 与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 与交叉轴两端对齐 | 每根轴线两侧的间隔都相等 | （默认值）：轴线占满整个交叉轴 */ }项目的属性： order：定义项目的排列顺序。数值越小，排列越靠前，默认为0 flex-grow：定义项目的放大比例，默认为0，即使有剩余空间也不放大。 flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，子元素将缩小。 flex-basis：定义在分配多余空间之前，项目占据的主轴空间，默认auto，即子元素本来的大小。 align-self：定义单个子元素的排列方式。
flex:flex-grow |flex-shrink|flex-basis<0 1 auto>
