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:主轴分配基数。

原文地址:https://www.cnblogs.com/qqhfeng/p/11261405.html