Flex弹性布局

Flex弹性布局

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

应用：

.box {
	display： flex;
	flex-direction: row | column | row-reverse | column-reverse;  // 布局方向，水平|垂直|倒序
	flex-warp: no-wrap | wrap | wrap-reverse; // 换行方式
	flex-flow: <flex-direction> || <flex-wrap>;
	justify-content: flex-start | flex-end | center | space-between | space-around; // 主轴对齐方式
	align-items: flex-start | flex-end | center | baseline | stretch; // 交叉轴对齐方式
	align-content: flex-start | flex-end | center | space-between | space-around; // 交叉轴多行对齐方式
}

.item {
	order: <integer>; // 位置序号
	flex-grow: <number> ; // default 0
	flex-shrink: <number> ; // default 1，值大于0
    flex-basis: <length> | auto; /* default auto */
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; // default 0 1 auto; 

	align-self:  flex-start | flex-end | center | baseline | stretch; // 设置单个元素的交叉轴对齐方式
}

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

参考阮一峰大神原文：Flex布局