flex布局解说和属性

1. flex-direction 规定当前DIV下面的子元素是横向布局还是纵向布局

row	默认值，横向布局相当于float:left
column	纵向,相当于DIV默认的垂直方向

2.justify-conten 主轴居左，居中，居右（这跟flex-direction的对齐方式改变而改变，没有固定的横向和纵向）

flex-start	模块居左边
flex-end	模块居右边
center	模块居中（相当于margin:0 auto）
space-between	模块两端对齐

3.align-items 侧轴居上，居中，居下（这跟flex-direction的对齐方式改变而改变，没有固定的横向和纵向）

flex-start	模块垂直居上
center	模块垂直居中（line-height:50px）
flex-end	模块垂直居下

4.flex-wrap flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

nowrap	默认值，所有模块一行展示
wrap	根据DIV的宽度，下面的模块自动是多行还是一行横向排版

5.flex-shrink处理文本溢出

number

一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

6:align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
baseline	元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
center	元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。