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 属性所设置的默认对齐方式。