iT邦幫忙

DAY 40
10

CSS沒有極限系列 第 36

CSS - Flex的排版方式

css 範例:http://ashareaday.wcc.tw/#2013-10-25
flex是用來排版的CSS屬性,在本章就用所了解的flex來排版看看,並且在介紹幾個flex屬性。


flex-wrap: wrap
Flex-wrap的功能其實就是把超過100%的元素換行,這邊就直接來做個實驗就可以了解。

//以下兩個html範例結構如下
<div class="container">
      <menu>Menu</menu>    
      <nav>Nav</nav>    
      <article>Article</article>   
      <footer>Footer</footer>
</div>



//sass code
header,menu,footer
  width: 100%
nav
  width: 120px
article
  flex: 1

如果沒有加上flex-wrap: wrap,以上的元素就會像是車禍一樣撞在一起,原因就是所有元素都被排成一排;只要加上了flex-wrap: wrap,超過100%的元素將會被換行。

.container
  display: flex
  flex-wrap: wrap


接下來也可以是著加上一些內容看看。

Order
這是定義元素的排列位置,下面有一個簡單的範例,只要點選的元素,該元素的order會被定義成-1,這樣他就會被排到最前面。

//sass code
//這是用純css製作的範例,可以參考之前的Checkbox的妙用
input:checked
  & + label
    order: -1
    background: #375F99

垂直水平置中
在過去的CSS都要用盡各種奇怪的方式才能垂直水平置中(table、light-height等等),現在可以容易達到垂直水平置中(還不只一種方式噢~)

Margin 置中
方法和以前差不多,只要設定margin: auto即可。

div
  margin: auto

Align-items & justify-content
簡單來說,就是從外層去設定內層物件的置中,在flex外層的對齊設定相當多樣,下一章會繼續介紹。

.container
  align-items: center
  justify-content: center


上一篇
CSS - display: box 與 display: flex
下一篇
CSS - Flex的對齊
系列文
CSS沒有極限41

1 則留言

0

我要留言

立即登入留言