flex弹性布局

css3新属性。

优势：

容器可以直接控制内部元素高度以及宽度的能力。

这么说大家可能感受不到，举个例子：

之前实现导航，我们大多数都是实现float属性来实现，然后挨个调整他们的大小位置等等。

但是有了flex属性，可以通过flex附带的属性轻易的调整内部元素的大小以及位置。

使用

明确几个概念：

flex分为两条轴：

1. 主轴（水平方向，左 -> 右），主轴开始为：main-start，主轴结束为：main-end
2. 交叉轴（垂直方向，上 -> 下），交叉轴开始为：cross-start，交叉轴结束为：cross-end

注意：使用flex布局之后，float、clear、vertical-align属性会失效，这个其实也好理解，flex布局的出现就是为了简化甚至替代这种写法，如果有效的话，也会产生冲突。

容器属性

1. flex-direction

   决定主轴方向。

   属性值：

   row：主轴为水平方向，自从左向右。默认值。

   row-reverse：反之。

   column：主轴为垂直方向，自上而下。

   column-reverse：反之。

2. flex-wrap

   决定item当一行排列不下的处理方式。

   nowrap：自动缩小项目，不换行。默认值。

   wrap：换行，第一行在上。

   wrap-reverse：换行，第一行在下。

3. flex-flow（常用）

   flex-direction与flex-wrap的简写。

   默认值：

   flex-flow：row nowrap

4. justify-content

   决定item在主轴上的对齐方式。

   flex-start：左对齐。

   flex-end：右对齐。

   center：居中对齐。

   space-between：两边对齐（口诀：空白在中间，也就是两边没有空白，就是两边对齐）

   space-around：沿着主轴均匀分布

5. align-items（一根主轴）

   决定item在交叉轴上的对齐方式。

   flex-start：顶端对齐。

   flex-end：底部对齐。

   center：垂直方向居中对齐。

   stretch：当item未设置高度时，item将与容器等高。

   baseline：item第一行文字的底部对齐。

6. align-centent（多根主轴）

   当有多根主轴时，多行在交叉轴上的对齐方式。且，设置了align-content时，align-items属性会失效。

   flex-start：顶部对齐。

   flex-end：底部对齐。

   center：垂直方向居中对齐。

   space-between：垂直方向两端对齐。

   space-around：沿垂直方向均匀分布。

   stretch：垂直方向充分伸展占据所有空间。

容器内部item属性

容器决定item的整体布局，item属性item之间布局，先后顺序、大小等。

1. order

   order属性为整数，数字越小越靠前。默认值为0。

   style="order:1"
   

2. flex-grow

   当flex容器有多余的空间时，item是否放大，定义放大比例，默认值为0

   style="flex-grow:2"
   

3. flex-shrink

   当flex容器空间不足时，item是否缩小，定义缩小比例，默认值为1

4. flex-basis

   item在主轴上占据的空间，默认值为auto，每个item占据的空间都一样。

   <div class="wrap">
       <div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
       <div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
       <div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
   </div>
   

5. align-self

   设置item自己独特的在交叉轴上的对齐方式。

   auto：与父元素align-self一致。

   flex-start：顶端对齐。

   flex-end：底部对齐。

   center：垂直方向居中对齐。

   stretch：未设置高度时，与容器高度一致。

   baseline：item第一行文字的底部对齐。