【CSS3】 CSS3:彈性盒子（Flex Box）

1. Flex布局是什么
2. 如何指定一個容器為Flex布局
3. Flex的基本語法
1. display
2. flex-direction
3. justify-content
4. align-items
5. flew-wrap
6. align-self
7. flex-flow
8. flex
9. order
4. 示例
1. 骰子的布局
2. 聖杯的布局
5. 參考文章

一， Flex布局是什么

布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。Flex布局是W3C組織於2009年提出的一種布局方案，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持。Flex布局將會成為未來布局的首選方案。

 

二，如何指定一個容器為Flex布局

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

.box{
  display: flex;
}

 

三，Flex的基本語法

display

語法： display:flex;

指定Flex。

 flex-direction

語法： flex-direction: row | row-reverse | column | column-reverse

指定彈性子元素在父容器中的排列順序。這個也可以通過設置 direction:rtl; 或是 direction:ltr; 來等效實現，其中的rtl、ltr是right to left、left to right的簡寫。

justify content

　語法： justify-content: flex-start | flex-end | center | space-between | space-around

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。

概念理解圖：

其中space-around，筆者總結了一個簡單的公式：

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

x:最兩邊留下的寬度。

W₂:就是模塊的width。

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

N:

align-items

語法： align-items: flex-start | flex-end | center | baseline | stretch

設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。

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

flex-wrap

語法： flex-flow: nowrap | warp | warp-reverse

align-content

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

 設置各個行的對齊方式。

align-self

語法： align-self: auto | flex-start | flex-end | center | baseline | stretch

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

flex-flow

語法：flex-direction和flex-wrap的簡寫。

flex

語法： flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

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

oder

語法： order: number|initial|inherit;

指定彈性模塊的排列順序，其中值越小，越優先，可以為負值。

 

四，示例

1，骰子的布局

骰子的一面，最多可以放置9個點。

下面，就來看看Flex如何實現，從1個點到9個點的布局。你可以到codepen查看Demo。

如果不加說明，本節的HTML模板一律如下。

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

上面代碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex項目。如果有多個項目，就要添加多個span元素，以此類推。

1.1 單項目

首先，只有左上角1個點的情況。Flex布局默認就是首行左對齊，所以一行代碼就夠了。

.box { display: flex; } 

設置項目的對齊方式，就能實現居中對齊和右對齊。

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

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

設置交叉軸對齊方式，可以垂直移動主軸。

.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 雙項目

.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 三項目

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

1.4 四項目

.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 六項目

.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 九項目

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

    2,聖杯布局

聖杯布局（Holy Grail Layout）指的是一種最常見的網站布局。頁面從上到下，分成三個部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導航、主欄、副欄。

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

本文章為博主原創作品，若需轉載請注明出處。