Flex-box

容器元素
`display`	为所有子元素启用 `flex`。
	`display: flex`
	`display: inline-flex`
`flex-direction`	确立主轴。
	`flex-direction: row`
	`flex-direction: row-reverse`
	`flex-direction: column`
	`flex-direction: column-reverse`
`flex-wrap`	如果子元素不能在一行内展示，则自动换行。
	`flex-wrap: nowrap`
	`flex-wrap: wrap`
	`flex-wrap: wrap-reverse`
`justify-content`	尝试在主轴上分配额外空间。
	`justify-content: flex-start`
	`justify-content: flex-end`
	`justify-content: center`
	`justify-content: space-between`
	`justify-content: space-around`
	`justify-content: space-evenly`
`align-items`	确定项目在交叉轴上的布局方式。
	`align-items: flex-start`
	`align-items: flex-end`
	`align-items: center`
	`align-items: baseline`
	`align-items: stretch`
`align-content`	仅对多行内容产生影响。此处显示的示例使用 `flex-wrap`。
	`align-content: flex-start`
	`align-content: flex-end`
	`align-content: center`
	`align-content: space-between`
	`align-content: space-around`
	`align-content: stretch`

子元素
`order`	允许你明确设置你希望每个子元素出现的顺序。
	`order: 整数`
`flex-grow`	允许你确定如何允许每个子元素作为整体的一部分增长。
	`/* 适用于所有 */ flex-grow: 1`
	`/* 第一个 / flex-grow: 1 / 第二个 / flex-grow: 3 / 第三个 */ flex-grow: 6`
`flex-basis`	在分配剩余空间之前定义元素的大小。
	`/* 第一个 / flex-basis: 20% / 第二个 */ flex-basis: 40%`
`flex-shrink`	如有必要，允许项目缩小。只有在设置大小或 `flex-basis` 时才真正有用。
	`/* 第一个和第二个 / flex-basis: 100% / 第二个 */ flex-shrink: 2`
`align-self`	设置单个项目的对齐方式。有关选项参考 `align-items`。
	`/* 第三个 */ align-self: flex-end`