CSS3--弹性盒模型（display:flex）

介绍篇好的文章：https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/

盒模型的概念并不是很陌生。
在传统的布局中，block不会是把块在垂直方向上从上到下排列；inline是在水平方向排列。
而现在要介绍的CSS3的弹性盒模型并没有这样的限制，可以有开发人员自由操作。

优势：弹性盒模型可以用简单的方式免租很多常见的布局要求。对响应式布局有很好的适应。开发人员只是声明布局应具有的行为，而不需要给出具体的实现方式，浏览器会负责完成实际的布局。（主流浏览器都得到了支持）

.div{
    display:-webkit-box;
    display:-moz-box
    -webkit-box-orient:horizontal
}

这种写法是之前的写法，虽然可以使用，但每次都需要加上浏览器前缀，比较麻烦，而且在display:flex出来以后基本就抛弃了。

这是开始是干货
关于弹性盒模型的定义，和好处说明什么的可以看下我前面推荐的文章，在这里我就不多说了，直接说用法。

基本布局
基本布局可以说是一个容器（父元素）包含若干个条目（子元素）这种形式。

<div class="boxcontainer">
    <div class="item" hljs-string">"background-color: red">1div>
    <div class="item" hljs-string">"background-color: yellow">2div>
    <div class="item" hljs-string">"background-color: blue">3div>
    <div class="item" hljs-string">"background-color: orange">4div>
div>

容器

1、容器有两个轴，主轴和交叉轴。主轴和交叉轴并不是固定为水平放下和垂直方向的，是可以定义的（这样就灵活了）。
2、主轴尺寸：如果主轴为水平则相当于原块元素的width。同理交叉轴尺寸就相当于height（注意前提是主轴定义为水平方向），若主轴为垂直，则主轴尺寸为height。
3、主轴起始，主轴结束可以理解为主轴开始结束的地方，同理交叉轴。

因为弹性布局时灵活的，所以理解上诉基本概念可以很好的去学习它的属性和值等。

条目
就是容器中的各部分，它们的基本排布又容器的属性定义，不过一些小的变动自己也可以调整。

CSS样式申明适用于容器或条目。

容器基本属性
先看段代码

.boxcontainer{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
}

display:flex 声明为弹性盒模型 不用解释就如display:block/inline一样
flex-direction:用来确定主轴的方向。
1. row(默认) 主轴为水平方向。排列顺序与文档顺序相同，即从左到右
2. row-reverse: 主轴为水平 排列顺序与文档谁许相反。
3. column 主轴为垂直方向，排列顺序为从上到下
4. column-reverse 主轴为垂直，排列顺序从下到上。
看一下具体例子：
row时：

row-reverse:

可以看得出来只是开始的位置变了，有点类似float:right但不是。

column

column-reverse:

这里我们看下row和column的不同，因为我并没有设置条目的大小，当为column时，会想我们认识的块一样占满整个横向空间，但当为row时 其实就像 float:left 一样 他们排列在一块了。

这是对主轴方向的设置，有的时候我们需要做类似选项卡那样的导航栏的时候就可以用row，但是要做某东和某宝的垂直导航的时候就可以将主轴设为column。
这也应证了我们之前说的一句话：开发人员只是声明布局应具有的行为，而不需要给出具体的实现方式，浏览器会负责完成实际的布局。是不是很厉害。

flex-wrap
当条目总尺寸超过主轴尺寸时采取的行为。
1. nowrap(默认) 条目沾满容易的主轴方向，不换行，所以可能出现重叠或超出容器的现象
2. wrap 分行（简单地说），与交叉轴方向一致（如果交叉轴是水平则出现在右侧，相信你们能理解）
3. wrap-reverse 分行，只不过方向与交叉轴方向相反（若交叉轴是垂直方向，则分出的行在前一行的上方，若交叉轴是水平的，则出现在左侧）

这里说的方向全都是用主轴方向，交叉轴方向，而不像以前的从左到右或从上到下，因为交叉轴 主轴是可变的， 毕竟单行盒模型灵活灵活嘛。

可能本来大家理解的，一看我的解释又迷糊了，所以简单粗暴直接上图。
主轴为水平，交叉轴为垂直的情况(flex-direction:row)：
nowrap

wrap

wrap-reverse

主轴为垂直，交叉轴为水平的情况（flex-direction:column）：
nowrap

wrap

wrap-reverse

说明一下 我这里条目的大小并没有设定，只是为了演示wrap的效果将设了容器的width(主轴尺寸)或height。还是想大家好好理解下主轴和交叉轴的概念。
其他的属性演示我不在写两种（主轴水平和主轴垂直），如果看了上图还不理解主轴方向的朋友，建议自己敲一下。

flex-flow
其实是flex-direction和flex-wrap的合写
flex-flow: row wrap

容器中的条目
以下css是用在条目上的而非容器上

条目的顺序

.item{
 order:1;
}

order：值 值位数字，可以为负数，值小的位置排在前面
这个很好理解，如上面的图，正常顺序1234，如果我给4加order：-1 那么顺序就会变成4123；

条目的弹性尺寸（3个属性）
flex-basis：接受的值与width值一样，用来确定条目初始主轴的尺寸。
当容器主轴为水平时：设置basis值会使条目水平尺寸有变化。


当容器主轴为垂直时：设置basis值会使条目垂直尺寸有变化。

item{
 flex-basis:auto
 width:50px;
}

当flex-basis：为auto时， 则条目的宽度等于width或height的值（主轴水平）

flex-grow
表示当容器有多余空间时，这是不同条目之间分配的比例。
值：是一个没有单位的非负数，默认是1；平均获得剩余空间。

以这个为例，如果他们的flex-grow为1、2、3、4的话，那么这4个条目会额外获得空白部分的1/10 2/10 3/10 4/10。会变成这样

来点数学哈哈。
比如空白剩余100px, 那么1会在他原来基础上加上10px，一次类推加20px 30px 40px。这样就会使条目充满容器，而随着容器尺寸的改变，空白尺寸也会改变，所以条目尺寸就会改变，所以对适应性布局很合适。

flex-shrink
和flex-grow类似，只不过是当容器空间不足的时候，缩小个条目。

分别使用flex-shrink:1、2、3、4后

在实际操作中我发现，当我不写flex-shrink时也不会超出容易，因为默认flex-shrink：1，只有设为0才会出现超出的样子。
flex-shrink：1、2、3、4 会等比例的所以，所以1缩的最少，而4缩的最多。原理同grow。

flex
flex 可以同时声明 -basis -grow -shrink
格式”none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]”

.item{
 flex:1 1 auto;
}
.tiem{
 flex:1 //默认 flex-grow:1 flex-shrink:1 flex-basis 值为0%
}

注意:在容器分配额外空间时是以”行”为单位的。
容器先根据”flex-wrap”的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。
看一个栗子：
容器990px 里面有4个条目 width：300px

.boxcontainer {
 width: 990px;
}

.item {
 width: 300px;
 flex: auto;
}

这里的flex 的意思是 flex-grow:1 -shrink:1 -basis:auto;

由于容器的宽度只有 990px，所以在一行中只能排列 3 个条目，而剩下的 1 个条目则会被排列到单独的一行中。在 3 个条目的行中，多余的空间 90px 被平均分配给 3 个条目；而在一个条目单独的行中，多余的 690px 被该条目完全占据。

条目对其
条目在容器中的对齐方式，3种方式
一、自动空白边
即“margin:auto” 容器中的空白部分 会被margin所占据，
比如容器100px，它的唯一条目为10px，那么空白为90px 如果设定条目的margin-left:auto；即等于margin-left:90px 条目就会出现在右侧

二、主轴方向上对齐
justify-content
这种对齐方式发生在修改条目的弹性尺寸和自动处理空白后。当某一行还有剩余空间的时候justify-content就会分配这些空间。
看下他的值

1. flex-start 条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
2. flex-end 条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
3. center 条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
4. space-between 第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
5. space-around 类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。
   

三、交叉轴方向上的对齐
align-items

1. flex-start 条目与其所在行在交叉轴起始方向上的边界保持对齐。
2. flex-end 条目与其所在行在交叉轴结束方向上的边界保持对齐。
3. center 条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
4. baseline 条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
5. stretch 如果条目的交叉轴尺寸的计算值是”auto”，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。
   

交叉轴空白处理
align-content:交叉轴方向上有空白时，对齐容器中的行
类似于justify-content，只不过align-content是对交叉轴，并且当容器只有单行时，此属性不起作用。

1. flex-start 行集中于容器的交叉轴起始位置。第一行与容器在交叉轴起始方向上的边界保持对齐，其余行按照顺序依次排列。
2. flex-end 行集中于容器的交叉轴结束位置。第一行与容器在交叉轴结束方向上的边界保持对齐，其余行按照顺序依次排列。
3. center 行集中于容器的中央。行都往容器的中央排列，在交叉轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则行会在两个方向上超出同样的空间。
4. space-between 行在容器中均匀分布。第一行与容器在交叉轴起始方向上的边界保持对齐，最后一行与容器在交叉轴结束方向上的边界保持对齐。空白空间在行之间平均分配，使得相邻行之间的空白尺寸相同。
5. space-around 类似于 space-between，不同的是第一行条目和最后一个行目与容器行的边界之间同样存在空白空间，而该空白空间的尺寸是行目之间的空白空间的尺寸的一半。
6. stretch 伸展行来占满剩余的空间。多余的空间在行之间平均分配，使得每一行的交叉轴尺寸变大。
   

写到这里就解释了我之前写过的 div水平居中问题
外层div(容器) : display:flex justify-content:center align-items:center
内部div(条目不分行)
实际上就是容器内容条目 水平居中：justity-content 垂直居中 align-items:center