Flex布局

容器属性
1.flex-direction 属性    【用于控制项目排列方向与顺序】
取值：row(默认)|row-reverse|column|column-reverse    row:横向排列    row-reverse：横向倒序    column：纵向排列    column-reverse：纵向倒序    

2.flex-wrap 属性    【用于控制项目是否换行】
取值：nowrap(默认)|wrap|wrap-reverse    nowrap：不换行        
wrap：换行。即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行        wrap-reverse：换行。第一排会紧贴容器底部。例如：第一行在下方【初始：第一行123,第二行456,第三行789。 使用该属性后：第一行789,第二行456,第三行123。第三行会紧贴容器底部，而一行不会紧贴容器顶部】

3.flex-flow 属性    【横向排列，且不换行】
flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写集合，默认属性为 row nowrap。例如：    flex-flow : row nowrap

4.justify-content 属性    【用于控制项目在横轴的对齐方式】
取值：flex-start（默认）|center|flex-end|space-between|space-around|space-evenly    flex-start：左对齐    center：居中    flex-end：右对齐        
space-between：左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等    
space-around：项目之间间距为左右两侧项目到容器间距的2倍    
space-evenly：项目之间间距 与 项目与容器间距相等。相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin

5.align-items 属性    【用于控制项目在纵轴排列方式】
取值：flex-start|center|flex-end|baseline|stretch（默认）    
stretch：如果项目没设置高度，或者高度为auto，则占满整个容器的高度    
flex-start：让项目在纵轴紧贴容器顶部    
center：在纵轴中心位置排列    
flex-end：让项目在纵轴紧贴容器底部    
baseline：让项目以第一行文字的基线为参照进行排列

6.align-content 属性    【用于控制多行项目的对齐方式。如果项目只有一行则不会起作用】
取值：flex-start|flex-end|center|space-between|space-around|space-evenly|stretch（默认）    
stretch：项目没设置高度，或高度为auto的情况下让项目填满整个容器的高度    
flex-start：让项目在纵轴紧贴容器顶部    
center：在纵轴中心位置排列    
flex-end：让项目在纵轴紧贴容器底部    
space-between：上下两侧项目紧贴容器    
space-around：项目之间间距为上下两端项目与容器间距两倍    
space-evenly：项目之间间距 与 项目与容器间距相等


项目属性1.order    【用于决定排列顺序，数值越小，项目排列越靠前】
取值：默认0

2.flex-grow    【用于决定项目在有剩余空间的情况下是否放大，默认不放大。注：即便设置了固定宽度，也会放大】
例如：假设默认三个项目中前两个项目都是0，最后一个是1，最后的项目会占满剩余所有空间     假设只有第一个项目默认为0，后两个项目flex-grow:1，那么后两个项目平分剩余空间     假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目再放大时所占空间是最后项目的两倍

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

4.flex-basis    【用于设置项目宽度】
取值：默认auto，项目会保持默认宽度，或者以width为自身宽度。但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性

5.flex    【用于定义项目放大、缩小与宽度】
取值：默认0 1 autoflex属性时flex-grow、flex-shrink与flex-basis三个属性的简写该属性有两个快捷键值，分别是 auto(1 1 auto)等分放大缩小，与 none(0 0 auto)不放大，但等分缩小

6.align-self    【用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致】
取值：auto(默认)|flex-start|center|flex-end|baseline|stretch，表示继承父容器的align-items属性。如果没有父元素，则默认stretch    
flex-start：让项目在纵轴紧贴容器顶部   
center：在纵轴中心位置排列    
flex-end：让项目在纵轴紧贴容器底部    
baseline：让项目以第一行文字的基线为参照进行排列    
stretch：如果项目没设置高度，或者高度为auto，则占满整个容器的高度

感谢