flex布局属性主要由 容器属性 和 项目属性 构成：
容器属性：
flex-direction属性：
取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序，纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。
flex-wrap属性：
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目 实际宽度也就只有50px了，而非我们自己设置的60px。
flex-flow属性：
是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
justify-content属性：
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
align-items属性：
取值：flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器。
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：
注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify- content处理纵轴，align-items处理横轴。
align-content属性：
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。