CSS_flex布局

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类似。

CSS_flex布局