css
CSS3 Flex的排版方式
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
this is away center.
Align-items & justify-content
簡單來說，就是從外層去設定內層物件的置中，在flex外層的對齊設定相當多樣，下一章會繼續介紹。
.container align-items: center justify-content: center
this is away center.