FlexBox小青蛙遊戲筆記
===
###### tags: `web` `frontend`

需要排列的元素外層要有一個父元素來包覆所有內容

display: flex;

## justify-content
**這個屬性可以水平對齊元素位置**
參數:
- flex-start: 元素和容器的左端對齊(main start)。
- flex-end: 元素和容器的右端對齊(main end)。
- center: 元素在容器置中。
- space-between: 元素之間保持相等的距離(左右元素將會與main start和main end貼齊)。
- space-around: 元素周圍保持相等的距離(間距也是平均分配)。

## align-items
**這個屬性可以垂直對齊元素位置(針對單行)**
參數:
- flex-start: 元素與容器的頂部對齊(cross start)。
- flex-end: 元素與容器的底部對齊(cross end)。
- center: 元素垂直置中。
- baseline: 元素在容器中各自依照本身的文字基準線來對齊。
- stretch: 元素被拉伸以填滿整個容器(全部撐開至Flexbox的高度)。

## flex-direction
**這個屬性定義元素在容器中擺放的位置**
參數
- row: 預設值，由左到右，從上到下(元素擺放的方向和文字方向一致)。
- row-reverse: 元素擺放的方向和文字的方向相反。
- column: 主軸從水平方向變為垂直方向，換言之，交錯軸變成水平方向，元素擺放由上到下，再從左到右(元素從上放到下)。
- column-reverse: 元素從下放到上。

## order
**這個屬性可以直接指定一個數字，就可以由數值小到大的排列順序，也可以設置單個元素的order屬性**
用法

order: ...-1,0,1...;

## align-self
**它作用在所套用的內元件本身，並不影響其他元件的排列方式
參數與align-items相同**

## flex-wrap
**這個屬性負責的是讓內容的元素換行**
參數
- nowrap: 所有的元素都在一行。
- wrap: 元素自動換成多行。
- wrap-reverse: 元素自動換成逆序的多行

## flex-flow
**它為 flex-direction 和 flex-wrap 的縮寫**
用法

flex-flow: row wrap;

## align-content
**這個屬性可以垂直對齊元素位置(多行的所有元素)**
參數
- flex-start：對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- space-between：將第一行與最後一行分別對齊最上方與最下方
- space-around：每行平均分配間距
- stretch：內容元素全部撐開

## 小坑
若是用過 flex-direction 之後，再使用 justify-content、align-items\content\self 須注意方向是否改變。
像是主軸變成垂直時，若要改動元素的水平擺放位置，應該設定 align-*，而非設定 justify-content

## 資源&參考
小青蛙遊戲網址
http://flexboxfroggy.com/#zh-tw

深入解析 CSS Flexbox
http://www.oxxostudio.tw/articles/201501/css-flexbox.html

更詳細的 Flex 用法
https://hackmd.io/MYMw7AHAbMYJwFoCmwAmqEBYCs3MIEMAmCARgSKgCMIBmFEYK7MIA===

<style>
.ui-infobar { display: none; }
</style>