flexbox

本文大量参考了Helen Emerson的《Using the CSS3 flexbox layout》，如有需要，请移步此文。

Flexbox简述

Flexbox的布局是一个用于页面布局的CSS3模块，目前为止，大部分的浏览器都支持或部分支持此功能，支持情况请参考caniuse网站。Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在伸缩容器中进行自由扩展和收缩，从而调整整个布局。

伸缩容器和伸缩项目

一个flexbox布局由伸缩容器和其中的伸缩项目组成。伸缩容器是一个HTML标签元素，并且“display”属性显示设置“flex”属性值，伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）。

伸缩方向与换行（flex-flow）

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。常见的flex-flow的值有row、column、row wrap等，其伸缩项目排列方式如下：

.container{
	display: flex;
	flex-flow: row; //还有columen、warp、row warp等
	min-width: 1000px; //还可以使用max-widht等属性设置最大/最小宽度/高度等
}

伸缩项目设置

伸缩容器中的所有子元素都将自动变成伸缩项目，仅需要设置伸缩项目的尺寸即可。设置其尺寸可以使用widht、height等固定伸缩项目的宽和高，也可以使用flex属性（还可以结合min-widht等属性）动态改变伸缩项目的尺寸。

.container{
	display: flex;
	flex-flow: row wrap；
	max-width: 1500px;
}
.left{
	flex: 1;
	min-width: 200px;
	max-widht: 400px;
}
.main{
	width: 600px;
}
.right{
	flex: 2;
	min-widht: 200px;
	max-width: 600px;
}

在以上容器中，为left right都设置flex，最小/最大宽度，而mian设置了固定宽600px。其排列规则如下（在chrome中验证）：

1. 当宽度足够宽时，先去除main的600px固定宽，left和right宽度比为1:2（超过max-widht，长度自动设为max-width的值）。
2. 当宽度不足时，优先满足left的min-widht和mian的widht。如果无法满足right的min-widht，right转到第二行。一次类推。
3. 所以，可以结合min-widht、max-widht和flex动态调整元素大小，并使元素不至于过大或者过小。
4. 计算规则为先按照flex分配元素尺寸（如果只有一个flex，则其填充剩余空白），然后参考最大最小尺寸，确定元素尺寸。每个元素都自动有一个隐式的最小尺寸，这里需要注意一下。