flex布局

6个容器属性

• flex-direction（决定item的排列方向）：row（水平方向，自左向右排列）
•                                                                row-reverse（水平方向，自右向左排列）
•                                                                column (垂直方向，自上向下排列)
•                                                                column-reverse(垂直方向，自下至上排列)      
• flex-wrap（如果一条线排列不下，是否换行，如何换行）：nowarp(默认，不换行)
•                                                                                               warp(换行，第一行在最上方，自                                                                                                  上至下排列)
•                                                                                               warp-reserve(换行，第一行在最                                                                                                  下方，自下至上排列)
• flex-flow（flex-direction和flex-wrap的简写形式）:<flex-direction><flex-warp>
• justify-content(在主轴【水平】）上的对齐方式)：flex-start（默认，左对齐）               
•                                                                                flex-end （右对齐）
•                                                                                center（居中）
•                                                                                space-between（两端对齐，item之间的间                                                                                 隔相等）
•                                                                                space-around（两端对齐，相当于每个                                                                                       item有相同的margin，所以两个item之间的                                                                                 间隔是item与父盒子边框距离的两倍）
• align-items（在交叉轴【垂直方向】上的对齐方式）：streth(默认，如果item未设置高度，将                                                                                       占满整个容器)
•                                                                                      flex-start(顶端对齐)
•                                                                                       flex-end(底端对齐)
•                                                                                       center(中间对齐)
•                                                                                       baseline(第一行文字的基线对齐)
•                                                                                      
• align-content：strech(默认，每行高度均分，占满行高)
•                         flex-start(顶部对齐)
•                         flex-end(底部对齐)
•                         center(垂直中间对齐) 
•                         space-between(垂直方向两端对齐，每行间隔相等)
•                         space-around(每两行的之间的间隔相等，行与行之间的间隔是行与边框的两                            倍) 

6个item属性

• order:<integer>（默认为0，数字越小，越靠前排）
• flex-grow（主轴空间充足时，item的放大比例）:<number>(默认为0)
• flex-shrink(主轴空间不足时，item的缩小比例)：<number>(默认为1)
• flex-basis(item占据水平方向的长度，可写作例如350px，以此计算主轴空间是否充足)：<integer>(默认为auto，即元素本身的大小)
• flex（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选）
• align-self(允许单个item有与其他item不一样的对齐方式): auto | flex-start | flex-end | center | baseline | stretch(默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch)