Flex弹性布局

1.启用弹性行为：使用 display 通用属性来创建一个flxbox容器，并将 直属内部子元素 转换      为flex属性.

2.方向：浏览器预默认值下，使用 .flex-row 可设置子元素水平方向排版呈现，或者使用.flex-row-reverse 可实现元素在水平上作反方向排列（右对齐、从右到左布局）。

 

3.使用 .flex-column 设置垂直方向布局，或使用 .flex-column-reverse 实现垂直方向的反转布局（从底向上铺开）。

 

4.内容对齐与对准：使用flexbox弹性布局容器上的 justify-content-* 通用样式可以改变flx项目在主轴上的对齐（x轴开始，如果 flex-direction: column则为y轴)，或选方向（值）包括： start (浏览器默认值),、end、 center、 between、 around。

 

5.对齐项目：使用 align-items-* 通用样式可以在flxbox容器上实现flex项目的对齐（y轴开始，如果选择flex-direction: column则从x轴开始)，可选参数有： start、end、 center、baseline、 stretch (浏览器默认值)。

 

6.自对齐：使用 align-self-* 通用样式可以使用flexbox上的项目单独改变在横轴上的对齐方式（y值开始，如果flex-direction: column则为x轴开始)，其拥有与align-items相同的可选子项: start、 end、center、 baseline、 or stretch (浏览器默认值)。

 

7.自相等：flex-fill在一系列兄弟元素上使用该类来强制它们变成相等的宽度，同时占据所有可用的水平空间

 

8.等宽变幻：使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。

 

9.flex-shrink-*如有必要，使用实用程序切换弹性项目的缩小能力。

 

10. 与Auto margins结合实现垂直布局：结合 align-items、 flex-direction: column、 margin-top: auto 或 margin-bottom: auto，可以垂直移动一个flex子容器到顶部或底部。