CSS3中Flex弹性布局

CSS3 中有一种新的布局方案—flex布局，可以简便、完整的实现各种页面布局，目前，得到了所有浏览器的支持！Flex布局将成为未来布局的首选方案。

Flex 是 Flexible Box 的缩写，我们成为“弹性布局”，任何一个容器都可以制定为 Flex 布局：

1
2
3

.box {
  display: flex;
}

行内元素也可以使用 Flex 布局：

1
2
3

.box {
  display: inline-flex;
}

当设为 Flex 布局之后，子元素的float、clear 和 vertical-align 属性将失效。

设置 Flex 熟悉之后的元素我们称之为 flex container，称为“容器”，它的所有子元素称为 Flex item，称为“项目”。

容器存在两根轴：水平轴 main axis 和垂直轴 cross axis。main axis 开始位置（从左至右）叫做 main start，结束位置叫 main end；垂直开始叫 cross start，结束位置叫 cross end。

容器的属性一共有6个：

flex-direction 属性决定项目的排列方向。

1
2
3

.box {
	flex-direction：row | row-reverse | colum | colum-reverse;
}

flex-wrap 属性定义如何换行。

1
2
3

.box {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认为 row nowrap。

1
2
3

.box {
	flex-flow: <flex-direction> | <flex-wrap>;
}

justify-content 属性定义项目在水平轴 main axis 上的对齐方式。

1
2
3

.box {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items 属性定义项目在交叉轴上如何对齐。

1
2
3

.box {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content 属性定义了垂直轴 cross axis 的对齐方式。如果项目只有一根轴线，该属性不起作用。

1
2
3

.box {
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目的属性一共有6个：

order 属性定义项目排列顺序。数值越小，排列越靠前，默认为0。

1
2
3

.item {
	order: <integer>;
}

flex-grow 属性定义项目的放大比例，默认为0，0为不放大，若所有项目的 flex-grow 属性都是1，则平均分配空间。

1
2
3

.item {
	flex-grow: <number>;
}

flex-shrink 属性定义项目的缩小比例，默认为1。负值对该属性无效。

1
2
3

.item {
	flex-shrink: <number>;
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间，默认值是 auto，即项目本来大小。

1
2
3

.item {
	flex-basis: <length> | auto;
}

flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

1
2
3

.item {
	flex: <flex-grow> <flex-shrink> <flex-basis>;
}

align-self 属性允许单个项目与其他项目不一样的对齐方式。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

1
2
3

.item {
	align-self: auto | flex-start | flex-end | center | baseline |stretch;
}