一、彈性盒子基礎(chǔ)結(jié)構(gòu)

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

    <div id=”flex1”>1</div>  ------->彈性項1

    <div id=”flex2”>2</div>  ------->彈性項2

    <div id=”flex3”>3</div>  ------->彈性項3

</div>

二、彈性容器屬性

1、設(shè)置元素變成彈性盒

display:flex;

2、flex-flow

值一：設(shè)置彈性項控制彈性項目的排列方向（行或列），值二：控制彈性項能否換行

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

設(shè)置彈性項目水平對齊方式。

！彈性容器寬度/高度必須足夠。

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

說明：

flex-start：靠左對齊

flex-end：靠右對齊

center：居中對齊

space-between：根據(jù)寬度/高度均布均布彈性項，最左及最右不均布。

space-around：完全根據(jù)寬度/高度均布均布彈性項，包括最左及最右。

 4、align-items

設(shè)置所有彈性項目縱向?qū)R方式。

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

說明：

flex-start：頂對齊

flex-end：底對齊

center：縱向居中對齊

baseline：彈性項第一行對齊

stretch：頂和底對齊

5、align-content

align-content屬性有效條件：

1、必須允許換行

2、彈性容器高度滿足

多彈性項換行情況縱向?qū)R方式。

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

說明：

flex-start：頂對齊

flex-end：底對齊

center：縱向居中對齊

space-between：第一行彈性項頂對齊，最后一行彈性項底對齊

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

stretch：拉伸各項彈性項，設(shè)置成相同高度

6、order

設(shè)置彈性項顯示的先后順序：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;    }

未設(shè)置margin-right: auto;

！設(shè)置margin-right: auto;意思是讓瀏覽器把右邊可用的部分利用起來。    .logo{        margin-right: auto;    }

三、彈性項屬性

1、align-self:

設(shè)置單個彈性項目縱向?qū)R方式。

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：彈性項最小寬/高，作用控制何時換行，響應(yīng)式設(shè)計中的斷點。

例如：