flex布局

在这里复习一下flex布局相关的知识：

 

弹性容器的样式：

flex-direction—设置主轴方向

flex-wrap—当容器主轴方向空间不足时，设置元素是否会自动换行。（默认值为nowrap，若flex-shrink都为0，则元素会溢出容器）

flex-flow—同时设置direction和wrap

justify-content—设置主轴上空白和元素如何排列（ flex-start / flex-end / center / space-around / space-evenly / space-between ）

align-content—设置辅轴上空白和元素如何排列（当辅轴上出现换行时才有所体现）

align-items—设置辅轴上元素的停靠位置（center / flex-start / flex-end ）

 

弹性元素的样式：

flex-grow—当容器主轴方向还有空间时，设置元素的伸展系数。容器的剩余空间会按比例分配给各个弹性元素。（默认为0）

flex-shrink—当容器主轴方向空间不足时，设置元素的收缩系数。各个弹性元素的收缩长度由收缩系数和元素长度共同决定。（默认为1）

flex-basis—元素主轴上不伸展不收缩时的长度，优先级比width和height高。（默认值为auto，即等于width或height）

align-self—单独设置辅轴上某个元素的停靠位置（特殊对待）

order—设置各个元素在容器中的排列顺序

 

CSS中有很多属性是在另一个属性前面加上了“inline-”就效果而言没什么区别，最大的不同在于是否能独占一行。