一， Flex布局是什么

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴(lài) display屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。Flex布局是W3C組織于2009年提出的一種布局方案，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持。Flex布局將會(huì)成為未來(lái)布局的首選方案。

二，如何指定一個(gè)容器為Flex布局

只需要在容器中添加值為flex的display屬性。

.box{  display: flex;}

三，F(xiàn)lex的基本語(yǔ)法

display

語(yǔ)法： display:flex;

指定Flex。

 flex-direction

語(yǔ)法： flex-direction: row | row-reverse | column | column-reverse

指定彈性子元素在父容器中的排列順序。這個(gè)也可以通過(guò)設(shè)置 direction:rtl; 或是 direction:ltr; 來(lái)等效實(shí)現(xiàn)，其中的rtl、ltr是right to left、left to right的簡(jiǎn)寫(xiě)。

justify content

　語(yǔ)法： justify-content: flex-start | flex-end | center | space-between | space-around

內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線(xiàn)（main axis）對(duì)齊。

概念理解圖：

其中space-around，筆者總結(jié)了一個(gè)簡(jiǎn)單的公式：

x=(W₂-N*W₁)/(2N)

x:最兩邊留下的寬度。

W₂:就是模塊的width。

W₁:一個(gè)子模塊的寬度（每個(gè)均勻）。

N:

align-items

語(yǔ)法： align-items: flex-start | flex-end | center | baseline | stretch

設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。

下面這張圖片可以幫助讀者理解baseline：

flex-wrap

語(yǔ)法： flex-flow: nowrap | warp | warp-reverse

align-content

語(yǔ)法： align-content: flex-start | flex-end | center | space-between | space-around | stretch

 設(shè)置各個(gè)行的對(duì)齊方式。

align-self

語(yǔ)法： align-self: auto | flex-start | flex-end | center | baseline | stretch

設(shè)置彈性元素自身在側(cè)軸方向的對(duì)齊。這個(gè)屬性要區(qū)別與align-content,align-content的范圍是每一行，然而align-self只是某一行里面的某個(gè)彈性元素。

flex-flow

語(yǔ)法：flex-direction和flex-wrap的簡(jiǎn)寫(xiě)。

flex

語(yǔ)法： flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

指定元素分配空間。需要注意，如果flex-basis為100%，那么該彈性模塊就會(huì)單獨(dú)占一行。

oder

語(yǔ)法： order: number|initial|inherit;

指定彈性模塊的排列順序，其中值越小，越優(yōu)先，可以為負(fù)值。

四，示例

1，骰子的布局

骰子的一面，最多可以放置9個(gè)點(diǎn)。

下面，就來(lái)看看Flex如何實(shí)現(xiàn)，從1個(gè)點(diǎn)到9個(gè)點(diǎn)的布局。你可以到codepen查看Demo。

如果不加說(shuō)明，本節(jié)的HTML模板一律如下。

<div class="box">  <span class="item"></span></div>

上面代碼中，div元素（代表骰子的一個(gè)面）是Flex容器，span元素（代表一個(gè)點(diǎn)）是Flex項(xiàng)目。如果有多個(gè)項(xiàng)目，就要添加多個(gè)span元素，以此類(lèi)推。

1.1 單項(xiàng)目

首先，只有左上角1個(gè)點(diǎn)的情況。Flex布局默認(rèn)就是首行左對(duì)齊，所以一行代碼就夠了。

.box {  display: flex;}

設(shè)置項(xiàng)目的對(duì)齊方式，就能實(shí)現(xiàn)居中對(duì)齊和右對(duì)齊。

.box {  display: flex;  justify-content: center;}

.box {  display: flex;  justify-content: flex-end;}

設(shè)置交叉軸對(duì)齊方式，可以垂直移動(dòng)主軸。

.box {  display: flex;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: flex-end;}

.box {  display: flex;  justify-content: flex-end;  align-items: flex-end;}

1.2 雙項(xiàng)目

.box {  display: flex;  justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  justify-content: space-between;  align-items: center;}

.box {  display: flex;  flex-direction: column;  justify-content: space-between;  align-items: flex-end;}

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}

.box {  display: flex;  justify-content: space-between;}.item:nth-child(2) {  align-self: flex-end;}

1.3 三項(xiàng)目

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}.item:nth-child(3) {  align-self: flex-end;}

1.4 四項(xiàng)目

.box {  display: flex;  flex-wrap: wrap;  justify-content: flex-end;  align-content: space-between;}

HTML代碼如下。

<div class="box">  <div class="column">    <span class="item"></span>    <span class="item"></span>  </div>  <div class="column">    <span class="item"></span>    <span class="item"></span>  </div></div>

CSS代碼如下。

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}.column {  flex-basis: 100%;  display: flex;  justify-content: space-between;}

1.5 六項(xiàng)目

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}

.box {  display: flex;  flex-direction: column;  flex-wrap: wrap;  align-content: space-between;}

HTML代碼如下。

<div class="box">  <div class="row">    <span class="item"></span>    <span class="item"></span>    <span class="item"></span>  </div>  <div class="row">    <span class="item"></span>  </div>  <div class="row">     <span class="item"></span>     <span class="item"></span>  </div></div>

CSS代碼如下。

.box {  display: flex;  flex-wrap: wrap;}.row{  flex-basis: 100%;  display:flex;}.row:nth-child(2){  justify-content: center;}.row:nth-child(3){  justify-content: space-between;}

1.6 九項(xiàng)目

.box {  display: flex;  flex-wrap: wrap;}

    2,圣杯布局

圣杯布局（Holy Grail Layout）指的是一種最常見(jiàn)的網(wǎng)站布局。頁(yè)面從上到下，分成三個(gè)部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導(dǎo)航、主欄、副欄。

HTML代碼如下：

<div class="flex-container">  <header class="header">頭部</header>  <article class="main">    <p>主體</p>  </article>  <aside class="aside aside1">邊欄 1</aside>  <aside class="aside aside2">邊欄 2</aside>  <footer class="footer">底部</footer></div>

CSS代碼入下：

.flex-container {    display: -webkit-flex;    display: flex;      -webkit-flex-flow: row wrap;    flex-flow: row wrap;    font-weight: bold;    text-align: center;}.flex-container > * {    padding: 10px;    flex: 1 100%;}.main {    text-align: left;    background: cornflowerblue;}.header {background: coral;}.footer {background: lightgreen;}.aside1 {background: moccasin;}.aside2 {background: violet;}@media all and (min-width: 600px) {    .aside { flex: 1 auto; }}@media all and (min-width: 800px) {    .main    { flex: 3 0px; }    .aside1 { order: 1; }     .main    { order: 2; }    .aside2 { order: 3; }    .footer  { order: 4; }}

 五，參考文章

https://davidwalsh.name/flexbox-dice

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

http://www.runoob.com/css3/css3-flexbox.html

本文章為博主原創(chuàng)作品，若需轉(zhuǎn)載請(qǐng)注明出處。