flex布局

布局的传统解决方案，是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局有时候不方便，比如一个盒子中左边一块固定宽度，右边的自动填充。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

任何一个容器都可以指定为 Flex 布局。

/*块元素*/
.box{
  display: flex;
}
/*行内元素*/
.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* Safari  */
  display: flex;
}

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

下面开始示例，首先：

<!--html-->
<div id="box">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

/* css */
* {
	margin: 0;
	padding: 0;
}
#box {
	width: 500px;
	height: 300px;
	border: 1px solid #000;
	margin: 100px auto;
}
#box>div {
	height: 50px;
	border: 1px solid #000;
}

如图：

flex ： 在父容器box上加 display:flex,在子div上加 flex: 1;
就成了这样：

5个盒子就平均的占满了父容器，即使子div加上margin，也会自动的平均分布，是不是很爽。然后我们来看看这个 flex: 1; 是个什么鬼，其实 flex 是个复合属性，有3个属性值，刚刚我们设的 flex: 1; 可在浏览器上看见

然后我们样式改成这样：

/*css*/
* {
	margin: 0;
	padding: 0;
}
#box {
	width: 500px;
	height: 300px;
	border: 1px solid #000;
	margin: 100px auto;
	display: flex;
}
#box>div {
	height: 50px;
	/*border: 1px solid #000;*//*用这个后第1个和第3个有个1px的问题，谁知道的评论里给下说明，谢谢了*/
	box-shadow: 0 0 2px;
}
#box div:nth-child(1) {
	flex: 1;
}
#box div:nth-child(2) {
	flex: 2;
}
#box div:nth-child(3) {
	flex: 3;
}
#box div:nth-child(4) {
	flex: 2;
}
#box div:nth-child(5) {
	flex: 2;
}
/**
 * flex: a b c;
 * 	a:数字，表示宽度如何扩展，可用附属属性flex-grow代替
 * 	b:数字，表示宽度如何收缩，可用附属属性flex-shrink代替
 * 	c:带单位的值，具体的长度，可用附属属性flex-basis代替
 */

如图

5个div的 flex 总和是10，就相当于把父容器分成了10分，flex：1 就是占1份，所以就是50px。如果把每个div加个 flex-basis: 100px;，然后box宽度改为 600，意思是每个div基础值为100px，然后还剩100px，再用flex-grow的比例进行分配，这时第一个就是110px。如果父容器是400px，不足500，这时就不看flex-grow，就要按照第二个值flex-shrink的比例进行收缩。另外回到开头的问题，如果第一个div固定宽度，

#box div:nth-child(1) {
	flex: 0 0 100px;
}

这时它就不参与分配，其他的分配剩余的。

一、容器属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

这6个属性设置在容器上。
1.1 flex-direction即项目的排列方向，设定在父容器

#box {
  flex-direction: row(默认的水平) | row-reverse(水平反向) | column(垂直) | column-reverse(垂直反向);
}

1.2 flex-wrap默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

#box{
  flex-wrap: nowrap(默认不换行) | wrap(换行，排不下的在下面换行) | wrap-reverse(反序换行，拍不下的在上面);
}

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

1.4 justify-content属性定义了项目在水平的对齐方式。
取值：

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

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

1.5 align-items属性定义项目在垂直方向如何对齐。

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

• flex-start：垂直方向的起点对齐。
• flex-end：垂直方向的终点对齐。
• center：垂直方向的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

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

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

• flex-start：与垂直方向的起点对齐。
• flex-end：与垂直方向的终点对齐。
• center：与垂直方向的中点对齐。
• space-between：与垂直方向两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个垂直方向。

二、项目的属性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

这6个设置在子盒子上
2.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
注意：如果同时设置了 order 和 父容器的 flex-direction，先看order，比如

#box {
	flex-direction: row-reverse;
}
#box div:nth-child(1) {
	order: 1;
}
#box div:nth-child(2) {
	order: 5;
}
#box div:nth-child(3) {
	order: 4;
}
#box div:nth-child(4) {
	order: 2;
}
#box div:nth-child(5) {
	order: 3;
}

先看 order，从小到大，应该 1>4>5>3>2,再看flex-direction，水平反向，就是2>3>5>4>1

2.2 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
另外的4个我们开头讲解了，这里就不再说了。。。