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