一、弹性盒子基础结构

<div id=”flex_box”>         ------->弹性容器

    <div id=”flex1”>1</div>  ------->弹性项1

    <div id=”flex2”>2</div>  ------->弹性项2

    <div id=”flex3”>3</div>  ------->弹性项3

</div>

二、弹性容器属性

1、设置元素变成弹性盒

display:flex;

2、flex-flow

值一：设置弹性项控制弹性项目的排列方向（行或列），值二：控制弹性项能否换行

flex-flow:row（默认）/row-reverse/column/column-reverse  nowarp/warp/warp-reverse;

说明：

属性值1：

row（默认）：弹性容器宽度足够时，弹性项并排显示。

column：弹性容器高度足够时，弹性项并列显示。

属性值2：

nowarp：无论浏览器多窄，都不换行。

warp：自动换行。

例如：

1、不允许换行

#flexs_box{    display: flex;    display: -webkit-flex;    width: 50%;    height: 50%;    flex-flow: row nowrap;}#flexs_box div{    width: 30%;    height: 20%;}

2、 允许换行

#flexs_box{    display: flex;    display: -webkit-flex;    width: 50%;    height: 50%;    flex-flow: row wrap;}#flexs_box div{    width: 30%;    height: 20%;}

3、justify-content

设置弹性项目水平对齐方式。

！弹性容器宽度/高度必须足够。

justify-content:flex-start/flex-end/center/space-between/space-around

说明：

flex-start：靠左对齐

flex-end：靠右对齐

center：居中对齐

space-between：根据宽度/高度均布均布弹性项，最左及最右不均布。

space-around：完全根据宽度/高度均布均布弹性项，包括最左及最右。

 4、align-items

设置所有弹性项目纵向对齐方式。

align-items:flex-start/flex-end/center/baseline/stretch（默认）

说明：

flex-start：顶对齐

flex-end：底对齐

center：纵向居中对齐

baseline：弹性项第一行对齐

stretch：顶和底对齐

5、align-content

align-content属性有效条件：

1、必须允许换行

2、弹性容器高度满足

多弹性项换行情况纵向对齐方式。

align-content:flex-start/flex-end/center/space-between/space-around/stretch

说明：

flex-start：顶对齐

flex-end：底对齐

center：纵向居中对齐

space-between：第一行弹性项顶对齐，最后一行弹性项底对齐

space-around：纵向平均分布，包括最上最下

stretch：拉伸各项弹性项，设置成相同高度

6、order

设置弹性项显示的先后顺序：order:-1/1/2....

例如：

<div id="banner">    <p class="logo">Our Company</p>    <a href="#">Home</a>    <a href="#" class="heightlight">About Us</a>    <a href="#">Content</a></div>

    #banner{        display: flex;        display: -webkit-flex;        align-items:flex-end;        background: #000;        color: #ffffff;        padding: 20px;        padding-bottom: 0px;    }    p{        font-size: 20px;        margin: 0;    }    a{        color:#fff;        display:inline-block;        padding: 5px 10px;        padding-bottom: 2px;        text-decoration: none;        background: #666;        margin-left: 5px;        border-radius: 3px 3px 0 0;    }    .heightlight{        background:#ccc;    }

未设置margin-right: auto;

！设置margin-right: auto;意思是让浏览器把右边可用的部分利用起来。    .logo{        margin-right: auto;    }

三、弹性项属性

1、align-self:

设置单个弹性项目纵向对齐方式。

flex1{

    align-self:xxxx;

}

2、flex

flex:flex-grow flex-shrink flex-basic;

说明：

flex-grow：所占宽/高比例：

    0：宽度为flex-basic

    ≥1：弹性容器减去flex-basic，剩余值按比例划宽/高

flex-shrink：弹性项宽/高变化率，值越大变化量越大

flex-basic：弹性项最小宽/高，作用控制何时换行，响应式设计中的断点。

例如：