flex布局

声明：display:flex; 块级

          display:inline; 行内块

改变弹性元素的方向：flex-direction:row; 水平方向从左到右（默认）

                                    flex-direction:row-reverse; 水平方向从右到左

                                    flex-direction: column; 垂直方向从上到下

                                    flex-direction: column-reverse; 垂直方向从下到上

溢出换行：flex-wrap: wrap; 换行

                  flex-wrap: wrap-reverse; 反向换行

简写： flex-direction: column;和flex-wrap: wrap;可以简写为flex-flow: column wrap;

主轴元素的排列方式：justify-content: flex-start; 开始对齐

                                    justify-content: flex-end; 结束对齐

                                    justify-content: center; 居中对齐

                                    justify-content: space-between; 两端靠边，中间居中

                                    justify-content: space-around; 元素间的间距是靠边边距的2倍

                                    justify-content: space-evenly; 平均分配

交叉轴元素的排列方式：align-items: flex-start; 开始对齐

                                        align-items: flex-end; 结束对齐

                                        align-items: center; 居中对齐

                                        align-items: stretch; 拉伸（column元素不能有宽；row元素不能有高）

多行元素在交叉轴的排列方式：align-content: flex-start;

                                                   align-content: flex-end;

                                                   align-content: center;

                                                   align-content: space-between;

                                                   align-content: space-around;

                                                   align-content: space-evenly;

弹性元素交叉轴控制：align-self: flex-start;

                                    align-self: flex-end;

                                    align-self: center;

                                    align-self: stretch;

元素可用空间分配：flex:1; 所有元素平均分配空间

                                flex:0; flex:1;  flex:3; 元素按各自比例分配空间