iT邦幫忙

DAY 37
7

CSS沒有極限系列 第 33

CSS - 伸縮自如的Flex box

Flexbox是css3的新的排版方式,過去排版主要是利用table、box、inline、float、position等等做排版,而這些都不是設計為了豐富的網頁排版使用。flex出現可以讓排版方式變得更為豐富,但它和過去的排版方式不同,所以許多開發者(我也是*.*)較難理解其運作方式。
css範例:http://ashareaday.wcc.tw/#2013-10-22


Flexbox是css3的新的排版方式,過去排版主要是利用table、box、inline、float、position等等做排版,而這些都不是設計為了豐富的網頁排版使用。flex出現可以讓排版方式變得更為豐富,但它和過去的排版方式不同,所以許多開發者(我也是*.*)較難理解其運作方式。

Display: box
在設定flex box之前,我們必須先將外圍元素設定一個新的display值 box,這新的值目前還需要增加前輟詞,如以下範例。

//css code
.box{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
}



//sass code
.box
  +display-box

//html code

<div class="box">
  <div class="flex1">box-flex: 1</div>
</div>

box-flex
接下來我們就可以設定內元素的flex,只要輸入屬性box-flex (目前還是要前輟詞..),後面緊接著數值就可以了,在這邊先將兩個內元素設定box-flex。

//html code
<div class="display-box1">
  <div class="flex1">box-flex: 1</div>
  <div class="flex3">box-flex: 3</div>
</div>



//css code
.flex1{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
}



//sass code
.flex1
  +box-flex(1)


flex的原理和過去的排版方式有相當大的不同,他並不是使用固定值或是百分比,如上範例,先將左邊的1與右邊的3相加得到4,左邊的黃色就是四分之一的大小,右邊則是四分之三的大小。

超乎想像的彈性
我們還可以再增加一個flex元素,系統會自動運算以下的結果,1 + 3 + 5 = 9,所以左邊的黃色是1/9,中間藍色是3/9,右邊的綠色是5/9。

//html code
<div class="display-box1">
  <div class="flex1">box-flex: 1</div>
  <div class="flex3">box-flex: 3</div>
  <div class="flex5">box-flex: 5</div>
</div>

與百分比共用
如果再flex-box插入其他單位的盒狀元素(display: box)是沒有問題的,如下範例,左邊插入了20%淡藍色,box-flex會讓出20%空間給盒狀元素,剩下的空間再去做分攤。

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

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

flex的設定值也不只這樣,明天會介紹更多更多~的使用方式。


上一篇
淺談CSS Grid system
下一篇
CSS - 伸縮自如的Flex box (2)
系列文
CSS沒有極限41

2 則留言

0
kenny3896
iT邦新手 4 級 ‧ 2013-10-23 10:57:45

水哦!

我要留言

立即登入留言