Flexbox布局入门笔记

1、display:flex 设定为Flexbox布局容器。

2、flex-direction: row表示在水平方向展开可伸缩项；column表示在垂直方向展开可伸缩项；总之就是定义主轴（侧轴方向）。

3、justify-content:可伸缩项目在主轴方向的对齐方式【align-content:表示换行后，各个项目在主轴上的对齐方式。】。

4、align-items:表示所有可伸缩项目在侧轴上的对齐方式【align-self:定义个体的在侧轴的对齐方式，会覆盖align-items】。

5、flex-wrap:表示主轴方向上元素是否换行（默认是不换行）。

6、order:表示伸缩项目的排列方式（默认0，越大的值越排在后面）。

7、margin:可伸缩项目对生于空间的利用（auto会充分利用剩余空间；如果左右为auto，那么这元素就居中了）。

8、flex:定义缩放时候的权重（如何分配主轴尺寸）

9、flex-grow:放大比例（默认0）.

10、flex-shrink:缩小比例（默认1）.

11、flex-basis:主轴分配基数。