CSS3 弹性盒子Flex详解

1. Flex布局

Flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
在父元素中设置 display:flex; 即指定该容器使用弹性布局。

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

一些概念：

采用 Flex 布局的元素，称为 “Flex 容器”。
它的所有子元素自动成为容器成员，称为 “Flex 项目”。
容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认眼主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。

2. 容器属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

2.1 flex-direction属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。取值：

flex-direction:row | row-reverse | column | column-reverse ;

分别表示：水平方向起点在左、水平方向起点在右、垂直方向起点在上、垂直方向起点在下
这里写图片描述

2.2 flex-wrap属性

flex-wrap属性用于指定项目的换行方式。取值：

flex-wrap:nowrap | wrap | wrap-reverse ;

分别表示：不换行（默认值）、换行且第一行在上面、换行且第一行在下面
这里写图片描述

2.3 flex-flow属性

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

如下图是设置了flex-flow:row-reverse wrap-reverse后的排列
这里写图片描述

2.4 justify-content属性

justify-content 属性定义了项目在主轴上的对齐方式。取值：

justify-content:flex-start | flex-end | center | space-between | space-around ;

分别表示：左对齐（默认值）、右对齐、居中对齐、两端对齐、每个项目两侧的间隔相等
这里写图片描述

2.5 align-items

align-items属性定义项目在交叉轴上的对齐方式。取值：

align-items：flex-start | flex-end | center | baseline | stretch ;

分别表示：上对齐、下对齐、居中对齐、项目的第一行文字基线对齐、项目未设置高度或设为auto时占满整个容器的高度（默认值）
这里写图片描述
（设置align-items:stretch时删除三个盒子的高度属性）

2.6 align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。取值：

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

3. 项目属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

3.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认值为0。

<style>
    .container{
        display: flex;
        width: 400px;
        height: 150px;
        border: 1px solid blue;
     }
    .box1{
        width: 100px;
        height: 100px;
        background-color: pink;
        order:2;
        border: 1px solid #000;
        margin: 10px;
    }
    .box2{
        width: 50px;
        height: 100px;
        background-color: pink;
        border: 1px solid #000;
        order:3;
        margin: 10px;
    }
    .box3{
        width: 80px;
        height: 100px;
        background-color: pink;
        order:1;
        border: 1px solid #000;
        margin: 10px;
    }
</style>
<body>
    <div class="container">
        <div class="box1">2</div>
        <div class="box2">3</div>
        <div class="box3">1</div>
    </div>
</body>

这里写图片描述

3.2 flex-grow属性

flex-grow属性定义项目的放大比例。
语法：

flex-grow: number | initial | inherit ;

看下面这个例子：

<style>
    #main {
        width: 350px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
    }
    #main div:nth-of-type(1) {flex-grow: 1;}
    #main div:nth-of-type(2) {flex-grow: 3;}
    #main div:nth-of-type(3) {flex-grow: 1;}
    #main div:nth-of-type(4) {flex-grow: 1;}
    #main div:nth-of-type(5) {flex-grow: 1;}
</style>
<body>
    <div id="main">
        <div style="background-color:coral;"></div>
        <div style="background-color:lightblue;"></div>
        <div style="background-color:khaki;"></div>
        <div style="background-color:pink;"></div>
        <div style="background-color:lightgrey;"></div>
    </div>
</body>

这里写图片描述

3.3 flex-shrink属性

flex-shrink属性指定了 flex 元素的收缩规则。flex 元素只有在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小依据 flex-shrink 的值
语法：

flex-shrink: number | initial | inherit ;

看下面的例子：

<style>
    .container{
        display:flex;
        weight:300px;
    }
    .container div{
        flex-basis:200px;
        border:3px solid blue;
        background-color:pink;
        height:50px;
    }
    .box{
        flex-shrink:2;
    }
    .box1{
        flex-shrink:1;
    }
</style>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box1">3</div>
    </div>
</body>

这里写图片描述

3.4 flex-basis属性

flex-basis属性用于设置或检索弹性盒伸缩基准值。它的默认值为auto，即项目的本来大小。可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex-basis: number | auto | initial | inherit ;

分别表示：规定灵活项目的初始长度、未设置长度式适应内容（默认值）、设置该属性为它的默认值、继承自父元素

3.5 flex属性

flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

3.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

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

该属性有6个取值，除了auto，其他都与align-items属性完全一致。auto表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

参考1：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
参考2：http://www.runoob.com/css3/css3-flexbox.html