CSS Flexbox布局

1.启用Flexbox布局

在DIV上增加display:flex样式后，DIV即可做为一个Flexbox容器

2.容器内元素堆叠方向【flex-directio】

row                        从左到右
row-reverse         从右到左
column                 从上到下
column-reverse   从下到上

3.水平方向的对齐【justify-content】

flex-start                靠左
center                    居中
flex-end                 靠右
space-around       分散对齐，但两边有空格
space-between    分散对齐，但两边没有空格

4.垂直方向的对齐－多行【align-content】

flex-start                靠上
center                    居中
flex-end                 靠下
space-around       分散对齐，但两边有空格
space-between    分散对齐，但两边没有空格

5.垂直方向的对齐－单行【align-items】

flex-start                靠上
center                    居中
flex-end                 靠下
stretch                   拉伸高度以适应容器

7.容器内元素换行控制【flex-wrap】

wrap                 必要时进行换行
nowrap            不换行，将子元素的宽度或高度缩小进行适应容器
wrap-reverse  必要时进行换行，但换行顺序是相反的

8.容器内元素的排序【order】

order的属性值为数字，默认为0，可以按属性值的数字大小改变容器内元素的默认显示顺序

9.容器内元素弹性增长/收缩速度【flex-grow】

增长：
flex-grow属性。值为数字，默认为0，元素宽度或高度在根据容器宽高增加时的增长速度按该属性的数字比例增长，类似到table中列宽度的百分比宽度

收缩：
flex-shrink属性。值为数字，默认为0，为0时表示不收缩。

初始长度：
flex-basis属性。值为像素，类似于width属性。

10.容器内元素对齐方式的覆盖【align-self】

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。