iT邦幫忙

DAY 39
7

CSS沒有極限系列 第 35

CSS - display: box 與 display: flex

CSS範例:[http://ashareaday.wcc.tw/#2013-10-24
](http://ashareaday.wcc.tw/#2013-10-24<br />
)
連續兩篇介紹了display: box,其實這當中有著淡淡的錯誤(其實我也是寫到一半才發現...)。

display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

display: box是存在的版本,但是它是過去的,現在使用的是display: flex,相信這個錯誤可以讓大家有深深的印象(泣...demo都做好了),當然這邊也要跟大家說聲抱歉,接下來的範例會重新用display: flex製作。

目前compass的核心也還是使用display: box

CSS範例:[http://ashareaday.wcc.tw/#2013-10-24
](http://ashareaday.wcc.tw/#2013-10-24<br />
)

display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

display: box是存在的版本,但是它是過去的,現在使用的是display: flex,相信這個錯誤可以讓大家有深深的印象(泣...demo都做好了),當然這邊也要跟大家說聲抱歉,接下來的範例會重新用display: flex製作。

目前compass的核心也還是使用display: box

display: flex
這是相當正式的版本,以我目前手上的firefox及chrome都是不需要前輟詞就可以運作。

//sass code
.display-box
  display: flex   
  width: 100%

和display: box設定其實差不多,外層設定只是把box換成了flex,且不需要前輟詞(目前我測試chrome & Firefox是可以正常顯示,IE10不行,safari不行)。

//sass code
.flex3    
  flex: 3
.flex5    
  flex: 5

內層只要設定flex加上值就可以,下面的結果就是左邊的1加上右邊的3得到4,左邊就會顯示1/4的黃色,右邊則是3/4的深藍色。

一樣可以插入更多的flex,如以下範例就是被分成九等份,再由三個flex去分配。

與固定值共用
接下來,我們插入一個固定值200px,那麼空間會保留200px的大小,剩於的再由flex去分攤,flex依然會在剩下的空間分為四等分(如下範例)。

混合使用
在過去這樣的問題相當難解決,透過CSS3我們可以將許多種單位混用,如下範例,可以先切200px,在切20%,剩餘的區域在分為1/4與3/4。

flex-direction
flex-direction等於box-direction的強化版,可以決定垂直排列及反轉排列。

名稱: flex-direction
值: row | row-reverse | column | column-reverse

正常版
預設值就是flex-direction: row,水平由左至右排列。

水平反轉
flex-direction: row-reverse,就可以水平反轉排列。

垂直柱狀
而將值設定為column,就可以垂直排列(如果換成column-reverse就可以垂直反轉噢~)。

在柱狀排列下,也可以設定百分比排列(box-flex的情況,firefox不支援垂直百分比。)


上一篇
CSS - 伸縮自如的Flex box (2)
下一篇
CSS - Flex的排版方式
系列文
CSS沒有極限41

1 則留言

我要留言

立即登入留言