【flex布局的基本应用】

        利用传统的盒模型左右排列会借助position，float或者display排列；起初在不使用flex布局之前，一直以为float布局是唯一真理！使用flex布局后才发现“真香”。

flex布局通过修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。相比float属性，float属性浮动布局后需要清除float属性带来的影响，且float属性会使父级的高度塌陷，相比于起来flex布局更加的简单便捷，且使用更为广泛。

1.flex-direction属性

（1）默认为row，即横向顺序排列 ；row-reverse同为横向排列，顺序为倒序

（2）column 与row相反，为纵向顺序排列 ；column-reverse同为纵向倒序排列

2.flex-wrap属性

（1）nowrap(默认)：默认不换行 如果宽度超出则自适应宽度

（2）wrap：换行 超出子元素会自动换行

（3）wrap-reverse：wrap换行后第一行会紧贴容器顶部，超出部分到第二行，依次类推，wrap-reverse第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

3.flex-flow

        flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。 

4.justify-content属性

（1）用于控制项目在横轴排列方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。 

（2）space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

（3）space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

（4）space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

5.align-items属性

（1）用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器 。

（2） flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反。

（3）center在纵轴中心位置排列。

（4）baseline比较特殊，它让项目以第一行文字的基线为参照进行排列

6.align-content

（1） 用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

（2）flex-start ，center，flex-end 与align-items属性表现一致；space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍；space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器；align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。

7.项目属性

（1） order：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

（2） flex-grow：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

（3）flex-shrink：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

（4）flex：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。