iT邦幫忙

DAY 38
6

CSS沒有極限系列 第 34

CSS - 伸縮自如的Flex box (2)

從上一篇可以了解到,flex和過去的比較起來,是相當具有彈性的,不只能像百分比一樣,還可以與固定像素配合,有效提升排版的豐富性。今天要介紹它更多樣的屬性值。
css 範例:http://ashareaday.wcc.tw/#2013-10-23

從上一篇可以了解到,flex和過去的比較起來,是相當具有彈性的,不只能像百分比一樣,還可以與固定像素配合,有效提升排版的豐富性。今天要介紹它更多樣的屬性值。

reverse 反向排列
CSS3許多屬性都可以反向排序,大多是使用direction,這邊就是用box-direction反轉容器內的元素。

正常版

<div class="display-box">
  <div class="n200px">200px</div> //最左邊的固定200px
  <div class="flex1">box-flex: 1</div> //中間的flex: 1
  <div class="flex3">box-flex: 3</div> //右邊的flex: 3
</div>

這是上一篇有介紹到的排列方式,固定像素加上兩個flex彈性元素。

Reverse

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



//sass code
.display-box
  +box-direction(reverse)

只要透過box-direction,就可以轉換排列的順序。

垂直排列
flex的效果不只是用在水平的排版上,包含垂直的編排也是能夠使用。

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



//sass code
.display-box
  +box-orient(vertical)

只要套用box-orient: vertical,就能夠把水平的排版,轉換為垂直的排版。

當然百分比也能繼續使用,只要設定高就可以了。


上一篇
CSS - 伸縮自如的Flex box
下一篇
CSS - display: box 與 display: flex
系列文
CSS沒有極限41

1 則留言

0

我要留言

立即登入留言