摘要：如果用動(dòng)畫來表現(xiàn)，可以看出拉長的時(shí)候紅色會(huì)變得比藍(lán)色長，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長，如此一來就更能體會(huì)在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。

Flexbox是一個(gè)CSS3的盒子模型（box model），顧名思義它就是一個(gè)靈活的盒子（Flexible Box）。

第一步要來看Flexbox的盒子模型，根據(jù)W3C文章所描述，flex的盒子模型如下圖所呈現(xiàn)，與一般的盒子模型不同的地方，在于Flexbox的盒子模型具有水平的起點(diǎn)與終點(diǎn)（main start、main end），垂直的起點(diǎn)與終點(diǎn)（cross start、cross end），水平軸與垂直軸（main axis、cross axis），然后元素具有水平尺寸與垂直尺寸（main size、cross size），這些都是相當(dāng)重要的布局概念。

再來我們先看看Flexbox有哪些屬性：

display

flex-direction

justify-content

align-items

align-self

align-content

flex-wrap

order

flex

display是我們熟知的CSS屬性，對于Flexbox來說，多了有兩種方式可以設(shè)定，預(yù)設(shè)為“flex”，其布局方式與block幾乎類似，都會(huì)強(qiáng)迫換行，但設(shè)定display:flex的子元素卻具備了更多彈性的設(shè)定，此外另外一種方式則是“inline-flex”，和inline-block也是幾乎雷同，意義上都是一個(gè)display:flex的元素外面包覆display:inline的屬性，在后方的元素不會(huì)換行。

CSS：

.flex,
.inline-flex{
    width:100px;
    height:50px;
    border:1px solid #000;
}
.flex{
    display:flex;
}
.inline-flex{
    display:inline-flex;
}

flex-direction表示Flexbox內(nèi)容元素的“排列方向”，分別有下列四種。

row：預(yù)設(shè)值，由左到右，從上到下

row-reverse：與row相反

column：從上到下，再由左到右

column-reverse：與column相反

CSS：

.flex-row{
    flex-direction:row;
}
.flex-row-reverse{
    flex-direction:row-reverse;
}
.flex-column{
    flex-direction:column;
}
.flex-column-reverse{
    flex-direction:column-reverse;
} 

justify-content決定了內(nèi)容元素與整個(gè)Flexbox的“水平對齊”位置，回想一下最上面講的Flexbox盒子模型，具有main start與main end左右兩個(gè)端點(diǎn)，justify-content就是按照這個(gè)方式做設(shè)定，而其中的設(shè)定值總共有下列五個(gè)。

flex-start：預(yù)設(shè)值，對齊最左邊的main start

flex-end：對齊最左邊的main end

center：水平居中

space-between：平均分配內(nèi)容元素，左右元素將會(huì)與main start和main end貼齊

space-around：平均分配內(nèi)容元素，間距也是平均分配

CSS：

.flex-start{
    justify-content:flex-start;
}
.flex-end{
    justify-content:flex-end;
}
.center{
    justify-content:center;
}
.space-between{
    justify-content:space-between;
}
.space-around{
    justify-content:space-around;
}

align-items剛好和justify-content相反，align-items決定了內(nèi)容元素與整個(gè)Flexbox的“垂直對齊”位置，再回想一下最上面講的Flexbox盒子模型，具有cross start與cross end左右兩個(gè)端點(diǎn)，align-items與align-self就是按照這個(gè)方式做設(shè)定，設(shè)定值總共有下列五個(gè)。

flex-start：對齊最上面的cross start

flex-end：對齊最下面的cross end

center：垂直居中

stretch：預(yù)設(shè)值，將內(nèi)容元素全部撐開至Flexbox的高度

baseline：以所有內(nèi)容元素的基線作為對齊標(biāo)準(zhǔn)

CSS：

.flex-start{
    align-items:flex-start;
}
.flex-end{
    align-items:flex-end;
}
.center{
    align-items:center;
}
.stretch{
    align-items:stretch;
}
.baseline{
    align-items:baseline;
}
.flex-item{
    width:60px;
    text-align:center;
}
.item1{
    font-size:20px;
    line-height: 60px;
    background:#c00;
}
.item2{
    line-height: 30px;
    background:#095;
}
.item3{
    font-size:30px;
    line-height: 100px;
    background:#059;
}

align-self的設(shè)定與align-items相同，但目的不同，align-self的作用在于覆蓋已經(jīng)套用align-items的屬性，如果照我們以前所寫，因?yàn)閍lign-items是針對所有子元素，所以必須要用align-self來進(jìn)行覆蓋，我們直接用上一個(gè)示例來修改就很清楚了。

CSS：

.item2{
    align-self:baseline;
    line-height: 30px;
    background:#095;
}

剛剛談到的align-items是針對內(nèi)容為單行的元素進(jìn)行處理，如果遇到多行的元素，就要使用align-content這個(gè)屬性，這個(gè)屬性總共有六個(gè)設(shè)定值。

flex-start：對齊最上面的cross start

flex-end：對齊最下面的cross end

center：垂直居中

space-between：將第一行與最后一行分別對齊最上方與最下方

space-around：每行平均分配間距

stretch：預(yù)設(shè)值，內(nèi)容元素全部撐開

CSS：

.flex-start,
.flex-end,
.center,
.space-between,    
.space-around,    
.stretch{
    display:inline-flex;
    flex-wrap:wrap;
    width:180px;
    height:160px;
    margin:5px 5px 40px;
    border:1px solid #000;
    vertical-align: top;
}
.flex-start{
    align-content:flex-start;
}
.flex-end{
    align-content:flex-end;
}
.center{
    align-content:center;
}
.space-between{
    align-content:space-between;
}
.space-around{
    align-content:space-around;
}
.stretch{
    align-content:stretch;
}
.align-content>div{
    padding:15px;
    margin:2px;
    background:#666;
}

在剛剛的示例看到一個(gè)flex-wrap的屬性，這個(gè)屬性負(fù)責(zé)的是讓內(nèi)容的元素?fù)Q行，因?yàn)楫?dāng)我們把父元素的display設(shè)定為flex或inline-flex的時(shí)候，子元素就是以單行的方式，彈性撐滿父元素，所以就要利用flex-wrap來換行，共有三個(gè)設(shè)定值。

nowrap：預(yù)設(shè)值，單行

wrap：多行

wrap-reverse：多行，但內(nèi)容元素反轉(zhuǎn)

CSS：

.nowrap,
.wrap,
.wrap-reverse{
    display:inline-flex;
    flex-wrap:wrap;
    width:180px;
    height:80px;
    margin:5px 5px 40px;
    border:1px solid #000;
    vertical-align: top;
}
.column{
    flex-direction:column;
    width:120px;
    height:180px;
}
.nowrap{
    flex-wrap:nowrap;
}
.wrap{
    flex-wrap:wrap;
}
.wrap-reverse{
    flex-wrap:wrap-reverse;
}
.align-content div{
    width:30px;
    height:30px;
    margin:5px;
    background:#069;
}
.column div{
    background:#f50;
}

剛剛在flex-wrap的屬性里頭看到了可以把元素反轉(zhuǎn)，order這個(gè)屬性更是可以直接指定一個(gè)數(shù)字，就可以由小到大的排列順序。

.item{
      width:50px;
      height:60px;
      text-align: center;
      line-height: 50px;
  }
  .order1{
      order:1;
      background:#c00;
  }
  .order2{
      order:2;
      background:#069;
  }
  .order3{
      order:3;
      background:#095;
  }
  .order4{
      order:4;
      background:#f50;
  }
  .order5{
      order:5;
      background:#777;
  }
  .order6{
      order:6;
      background:#077;
  }

好酒沉甕底，有耐心看到下面的才會(huì)看到重點(diǎn)喔哈哈！flex應(yīng)該是Flexbox里頭最重要的屬性了，而flex其實(shí)是由三個(gè)屬性組合而成，依照先后順序分別是“flex-grow”、“flex-shrink”和“flex-basis”，如果flex只填了一個(gè)數(shù)值（無單位），那么預(yù)設(shè)就是以flex-grow的方式呈現(xiàn)，至于三個(gè)屬性的解釋如下：

flex-grow：數(shù)字，無單位，當(dāng)子元素的flex-basis長度“小”于它自己在父元素分配到的長度，按照數(shù)字做相對應(yīng)的“伸展”比例分配，預(yù)設(shè)值為0，不會(huì)進(jìn)行彈性變化，不可為負(fù)值，設(shè)為1則會(huì)進(jìn)行彈性變化。

flex-shrink：數(shù)字，無單位，當(dāng)子元素的flex-basis長度“大”于它自己在父元素分配到的長度，按照數(shù)字做相對應(yīng)的“壓縮”比例分配，預(yù)設(shè)值為1，設(shè)為0的話不會(huì)進(jìn)行彈性變化，不可為負(fù)值。

flex-basis：子元素的基本大小，作為父元素的大小比較基準(zhǔn)，預(yù)設(shè)值為0，也因?yàn)轭A(yù)設(shè)值為0，所以沒有設(shè)定此屬性的時(shí)候，會(huì)以直接采用flex-grow屬性，flex-basis也可以設(shè)為auto，如果設(shè)為auto，就表示子元素以自己的基本大小為單位。

三個(gè)屬性可以分開設(shè)定，也可以合在一起用一個(gè)flex統(tǒng)一設(shè)定，下面的例子展現(xiàn)出同一個(gè)Flexbox，在不同的寬度，子元素會(huì)有不同大小的呈現(xiàn)。

HTML：

        
1
        
2


        
1
        
2

CSS：

.flex{
    display:inline-flex;
    height:60px;
    margin:5px 5px 40px;
    border:1px solid #000;
    vertical-align: top;
}
.flex-300{
    width:300px;
}
.flex-150{
    width:80px;
}
.item{
    height:60px;
    text-align: center;
    line-height: 50px;
}
.item1{
    flex:1 2 200px;
    background:#c00;
}
.item2{
    flex:2 1 100px;
    background:#069;
}

如果用動(dòng)畫來表現(xiàn)，可以看出拉長的時(shí)候紅色會(huì)變得比藍(lán)色長，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長，如此一來就更能體會(huì)flex在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。

以上就是Flexbox的完整介紹，因?yàn)橛辛诉@個(gè)屬性，讓在做layout的布局又更加彈性了！