css的弹性布局

布局是css中很重要的一部分，一般来说我们会用盒模型，定位，浮动来解决。但是对于一些特殊情况传统的解决方法就会比较复杂。

比如垂直居中，等距分布等。

所以在2009年，w3c提出了一种新的解决方法——Flex(弹性布局)。

一

在了解Flex之前，我们先来了解一下Flex的一些基本特性。

1.任何元素都可以设置Flex。Flex的作用相当于一个容器，当元素设置了Flex之后，会对容器内的子元素起作用。

2.绝大部分的浏览器都支持Flex,但是会有版本的限制。

不同版本浏览器的兼容问题可参考下图。

3.容器中默认有两条轴线，默认情况下水平的为主轴，垂直的为交叉轴，用来限定我们的布局方法，有点类似数学上的X轴和Y轴。

在主轴左侧的开始位置叫做main start，结束位置叫做mian end。在交叉轴顶部开始的位置叫做cross strat，在结束的位置叫做 cross end。

具体可参考下图。

浅灰色部门表示设置了flex的容器，深灰色的色块表示在容器下的子集。

二.

下面正式开始说容器上的6个属性。（下文默认主轴方向为水平方向）

1. flex-direction: row(默认) | row-reverse | column | column-reverse;
设置容器下元素的排列方向，row表示水平从左向右，row-reverse则表示反向水平从右向左，同理column表示垂直从上至下，column-reverse从下至上。

我们一起来看个demo:

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #div1{
            width: 200px;
            height: 200px;
            background:red;
        }
        #div1 div{
            width:48px;
            height:48px;
            background:green;
            color:#fff;
            border:1px solid #fff;
        }

    <div id="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

这是没有设置Flex的时候。

在此基础上，我们给div加上flex-direction

    #div1{
            display:flex;
            flex-direction:row;
            width: 200px;
            height: 200px;
            background:red;
        }

row

再来看一下flex-direction:column和flex-direction:column-reverse

flex-direction:column flex-direction:column-reverse

2.flex-wrap: nowrap(默认) | wrap | wrap-reverse;
定义容器内元素如何换行，nowrap不换行，wrap向下换行，wrap-reverse向上换行。

还是看demo:

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #div1{
            display:flex;
            flex-wrap:nowrap;
            width: 200px;
            height: 200px;
            background:red;
        }
        #div1 div{
            width:48px;
            height:48px;
            background:green;
            color:#fff;
            border:1px solid #fff;
        }
    </style>

    <div id="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

我给每个div设置宽度是50px，按理说容器是放不下第5个div的，但是如果我设置了flex-wrap:nowrap，结果是不会换行的，而是会自动的适应。

flex-wrap:nowrap

下面来看看另外两个属性：

flex-wrap:wrap flex-wrap:wrap-reverse

有个地方值的说一下：换行的行距会自动计算容器的高度进行自动计算，也就是说第5个div距离第一行和距离底部的距离是相等的。

我们可以多些几个测试一下。

3.flex-flow: <flex-direction> || <flex-wrap>;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，用法跟上面是一样的。

4.justify-content: flex-start（默认） | flex-end | center | space-between | space-around
定义容器下元素在主轴方向上的对齐方式，flex-start向左对齐，flex-end向右对齐，space-between两端对齐，space-around：每个元素两侧的间隔相等。

我们一起来看下效果(代码就不贴了，跟原来是一样的)

justify-content:flex-start justify-content:flex-end justify-content justify-content:space-between

5.align-items: flex-start| flex-end | center | baseline | stretch(默认) ;
有主轴方向的，肯定就有交叉轴的。align-items定义了交叉轴的对齐方式，flex-start顶端对齐，flex-end底部对齐，baseline根据元素的第一行文字的基线对齐，stretch在未设置高度或者高度为auto的情况下，高度自适应容器对齐。

我们依次来看一下效果。

align-items: flex-start align-items: end align-items:center align-items: stretch

给第二个设置一个padding-top:10px;另外两个的位置会自动调整，跟第二个的文字基线对齐。

align-items:baseline

6.align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也就是说，我们只有在我们给容器设置了换行之后，这个属性才会起作用。

具体的效果跟.align-items是类似的，不同的只是一个是设置多行的。

假设现在我们有两行，但是设置的是align-items：center，他会先换行，然后把换行之后的两行内容看作一个整体，再进行居中。

align-items：center

但如果是align-content则效果不同，他会把两个元素都居中。

align-content:center

三.

说完容器的取值，我们再来说说容器下子元素的取值，它的取值也有6个。

1.order
元素的排列顺序，数值越大越靠后，默认情况下为0；

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #div1{
            display:flex;
            width: 200px;
            height: 200px;
            background:red;
        }
        #div1 div{
            width:48px;
            height: 48px;
            background:green;
            color:#fff;
            border:1px solid #fff;
        }
        #div1 div:nth-child(2){
            order: 1;
        }
    </style>
    <div id="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

给第二个div设置order为1，2就跑后面去了。

2.flex-grow

定义元素的放大比例，默认为0，表示元素本身大小。

同样的，我给元素放大0.5倍，元素的宽度就变为75px;

        #div1 div:nth-child(2){
            flex-grow:0.5;
        }

如果我放大2倍，那么第二个div应该会变为150px，但实际上元素的宽度是100。也就是说，元素放大只会分配容器剩余的空间，而不会一直放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink

有放大就有缩小，这个属性是定义元素的缩小比例，跟放大类似，默认值为1，也就是说项目空间不足时自动缩小。（这就是为什么不换行的时候，元素会自动缩小的原因）

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

4.flex-basis: <length> | auto;

定义元素在分配多余空间之前，占据的大小。浏览器会根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。也可以设置为固定值，比如多少PX，在容器空间有剩余的情况下就是元素的值，但是在元素空间没有剩余的情况下会自动进行缩放。

5.flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6. align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-self属性可单独设置元素的对齐方式，并可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

对齐方式与align-items相同。