CSS3之Flexbox佈局

CSS3爲咱們提供了一種可伸縮的靈活的web頁面佈局方式-flexbox佈局，它具備很強大的功能，能夠很輕鬆實現不少複雜佈局，在它出現以前，咱們常用的佈局方式是浮動或者固定寬度+百分比來進行佈局，代碼量較大且難以理解。

爲了更好理解flexbox佈局，這裏首先要介紹幾個概念：

若是所示：

（1）主軸（側軸），flexbox佈局裏面將一個可伸縮容器按照水平和垂直方向分爲主軸或側軸，若是你想讓這個容器中的可伸縮項目在水平方向上可伸縮展開，那麼水平方向上就是主軸，垂直方向上是側軸，反之亦然；

（2）主軸（側軸）長度，當肯定了哪一個是主軸哪一個是側軸以後，在主軸方向上可伸縮容器的尺寸（寬或高）就被稱做主軸長度，側軸方向上的容器尺寸（寬或高）就被稱做側軸長度；

（3）主軸（側軸）起點，主軸（側軸）終點，例如主軸方向是水平方向，一般在水平方向上網頁佈局是從左向右的，那麼可伸縮容器的左border就是主軸起點，右border就是主軸終點，側軸是在垂直方向，一般是從上到下的，因此上border就是側軸起點，下border就是側軸終點；

（4）伸縮容器：若是要構建一個可伸縮的盒子，這些可伸縮的項目必需要由一個display：flex的屬性的盒子包裹起來，這個盒子就叫作伸縮容器；

（5）伸縮項目：包含在伸縮容器中須要進行伸縮佈局的元素被稱做伸縮項目；

明確以上概念以後就能夠來構建flexbox佈局了；

第一步，構建一個flexbox容器，並在容器中放置幾個可伸縮項目，以下：

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

HTML代碼：

<div class="flex-container">
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
   </div>

效果以下：

 

其中四個可伸縮的項目在水平方向上被排列成了一行，同時可伸縮項目相左對齊；

display：flex表明這個容器是一個可伸縮容器，還能夠取值爲inline-flex,二者的區別在於前者將這個容器渲染爲塊級元素，後者將其渲染爲內聯元素。

這裏有幾個默認的屬性雖然沒有設置，可是默認值確實起做用了，它們是：

flex-direction屬性，它的取值爲row，column，column-reverse，row-reverse,默認值是row，表示在水平方向上展開可伸縮項，若是取column表明在垂直方向上展開可伸縮項目，column-reverse，row-reverse表明相反方向，通俗講，flex-direction屬性就是用來定義主軸側軸方向的。給以上效果添加flex-direction：column效果以下：

 justify-content屬性，用來表示可伸縮項目在主軸方向上的對齊方式，能夠取值爲flex-start,flex-end,center,space-between,space-around，其中flex-start,flex-end,表示相對於主軸起點和終點對齊，center表示居中對齊，space-between表示兩端對齊並將剩餘空間在主軸方向上進行平均分配，space-around表示居中對齊而後在主軸方向上將剩餘空間平均分配

justify-content:space-between

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-between;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

效果以下：

能夠看到它將各個可伸縮項目在主軸方向上兩端對齊並平分了剩餘空間；

justify-content:space-around

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
        }
.flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;
        }

效果以下：

 能夠看到這個屬性讓可伸縮項目沿着主軸方向進行了居中對齊而且均分了剩餘空間；

align-items屬性：該屬性是用來表示可伸縮項目在側軸方向上的對齊方式，可取的值有flex-start,flex-end,center,baseline,stretch，須要解釋的是baseline值，它是按照一個計算出來的基準線而後讓這些項目沿這個基準線對齊，基準線的計算取決於可伸縮項目的尺寸及內容，以下：

align-items:baseline;

css代碼：

.flex-container{
            display:flex;     
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            margin: 5px;;
        }
        .a{
            margin-top: 10px;
            height: 100px;
        }
        .b{
            margin-top: 20px;
            height: 150px;
        }
        .c{
            margin-top: 30px;
            height: 80px;
        }

HTML代碼：

 <div class="flex-container">
       <div class="flex-item a">A</div>
       <div class="flex-item b">B</div>
       <div class="flex-item c">A</div>
       <div class="flex-item a">B</div>
   </div>

效果以下：

能夠看到四個可伸縮項目在側軸方向上（垂直方向）高度不一，margin不同，可是最後都按照計算出來的一個基準線對齊；

align-items:stretch;

這個是取值會讓可伸縮項目在側軸方向上進行拉伸，前提是這些項目在側軸方向上沒有設置尺寸，不然會按照你設置的尺寸來渲染。

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:stretch;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            /*height: 100px;*/
            margin: 5px;;
        }

 HTML代碼：

<div class="flex-container">
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
       <div class="flex-item ">A</div>
       <div class="flex-item ">B</div>
   </div>

效果以下：

 能夠看到這些可伸縮項目在側軸方向上被拉伸了，由於在垂直方向上沒有設置高度。

到目前爲止，咱們全部的伸縮項目都是在一行或者一列上進行的，並無進行換行和換列，flex-wrap屬性表示是否支持換行或者換列，它有nowrap,wrap,wrap-reverse三個取值，nowrap是默認值，表示不換行或者換列，wrap表示換行或者換列，wrap-reverse表示支持換行或者換列，可是會沿着相反方向進行排列（如主軸是垂直方向換行後就按照先下後上的順序來排列伸縮項）

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
    <div class="flex-item ">A</div>
    <div class="flex-item ">B</div>
</div>

效果以下：

能夠看到伸縮項增多以後一行難以放下的時候會接着換行。wrap屬性保證換行後按照正常的從上到下順序排列

align-content屬性用來表示換行以後各個伸縮行的對齊方式，它的取值有 stretch,flex-start,flex-end,center,space-between,space-around，意義和align-items屬性取值意義相同，上面咱們將7個伸縮項目分紅了兩行來排列，

將css代碼添加align-content屬性，html代碼不變，以下：

CSS代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }

效果以下：

能夠看到兩個伸縮行在側軸（垂直）方向上兩端對齊了。

flex-flow屬性，該屬性是個復屬性，它是flex-direction和flex-wrap的複合屬性，flex-direction：row;flex-wrap:wrap就等同於flex-flow:row wrap

order屬性，該屬性用來表示伸縮項目的排列方式，正常狀況下伸縮項目會按照主軸起點到主軸終點排列，遇到換行或者換列會按照從側軸起點到終點進行排列（除非設置了某些 對齊方式的reverse），可是某些狀況下這種默認顯示順序不符合要求，能夠採用給伸縮項添加order屬性來指定排列順序，默認狀況下，每一個伸縮項的order都是0，改屬性可正可負，越大的值會被排列在越後面。

css代碼：

 .flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;    
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .order1{
            order:1;
        }
        .order2{
            order:2;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item order1">1</div>
    <div class="flex-item  order2">2</div>
    <div class="flex-item ">3</div>
    <div class="flex-item ">4</div>
    <div class="flex-item ">5</div>
    <div class="flex-item ">6</div>
    <div class="flex-item ">7</div>
    <div class="flex-item ">8</div>
</div>

效果以下：

默認狀況下，會按照HTML的順序1-8進行顯示，可是因爲給div1和2設置了大於0的order,因此他們被放在了最後顯示（由於其餘沒有被設置的div的order默認屬性都是0）

margin屬性在flexbox佈局中有很強大的做用，若是給某個可伸縮項設置某個方向上的margin爲auto，那麼這個可伸縮項就會在這個方向上佔用該方向的剩餘空間來做爲本身的這個方向上的margin。

css代碼：

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            margin-right:auto;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  ">2</div>
    <div class="flex-item ">3</div>

</div>

效果以下：

因爲給伸縮項1添加了margin-right爲auto，因此它獨佔了本行的剩餘空間做爲它的right margin值。

利用這個特性，咱們在flexbox佈局中很容易實現可伸縮元素的垂直水平居中，

css代碼;

.flex-container{
            display:flex;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            flex-flow: row wrap;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            margin:auto;
        }

 HTML代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
</div>

效果以下：

align-self屬性，該屬性是給各個可伸縮項設置本身的在側軸上的對齊方式的，以前在容器上設置的align-item屬性是做爲一個總體設置的，全部的元素對齊方式都同樣，align-self屬性會覆蓋以前的align-item屬性，讓每一個可伸縮項在側軸上具備不一樣的對齊方式，取值和align-item相同：

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            align-self:flex-start ;
        }
        .b{
            align-self:flex-end;
        }
        .c{
            align-self:center;
        }

html代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  b">2</div>
    <div class="flex-item c">3</div>

</div>

效果以下：

能夠看到三個伸縮項在側軸上被賦予了不一樣的對齊方式。

flex屬性，這個屬性是加在伸縮項上面的，它定義了伸縮項如何分配主軸尺寸，一般取值爲auto或者數字，auto瀏覽器會自動均分，數字會按照伸縮項所佔的數字比重來分配空間，

這個屬性會覆蓋伸縮項在主軸上設定的尺寸，當給主軸上伸縮項設定了尺寸（寬或高）和這個屬性的時候，事實上仍是會按照這個屬性來進行空間分配。

css代碼：

.flex-container{
            display:flex;
            flex-direction: row;
            width:600px;
            height:230px;
            background-color: #ccc;
            justify-content: space-around;
            align-items:baseline;
            align-content: space-between;

        }
        .flex-item{
            background-color:blue;
            width: 100px;
            height: 70px;
            margin: 5px;;
        }
        .a{
            align-self:flex-start ;
            flex:1;
        }
        .b{
            align-self:flex-end;
            flex:2;
        }
        .c{
            align-self:center;
            flex:1;
        }

HTML代碼：

<div class="flex-container">
    <div class="flex-item a">1</div>
    <div class="flex-item  b">2</div>
    <div class="flex-item c">3</div>

</div>

效果以下：

能夠看到伸縮項儘管設置了寬度，可是最終仍是按照咱們設置的flex比例對水平空間進行了分割。