內容大綱
父容器屬性：決定子元素排列方式
第一步要建立的是display屬性為flex或inline-flex（效果同inline-block，本身有inline特性）的父容器。
賦有flex屬性的容器，子元素的寬度都會被壓縮成內容的寬度，高度則會延展父容器的空間（這是因為預設align-items屬性為stretch）。
.flex-container
p1
p2
p3
p4
flex-direction
決定子元素的排列方向。預設為row（橫向左->右），另外分別有row-reverse（橫向右->左）、column（縱向上->下）、column-reverse（縱向下->上）。
flex-direction:row
1
2
3
flex-direction:row-reverse
1
2
3
flex-direction:column
1
2
3
flex-direction:column-reverse
1
2
3
flex-wrap
決定子元素是否換行，預設為nowrap（不換行）。
flex-wrap:nowrap
1
2
3
4
flex-wrap:wrap
1
2
3
4
5
6
flex-flow
flex-direction與flex-wrap的簡式。
flex-flow: {flex-direction} {flex-wrap}
justify-content
決定子元素平行於主軸（flex-direction）的對齊方式（預設為水平對齊方式，反之如果flex-direction是column，則是決定子元素的垂直對齊方式），預設為flex-start。
justify-content: flex-start /* 對齊容器方向的起點 */
1
2
3
justify-content: center /* 置中 */
1
2
3
justify-content: flex-end /* 對齊容器方向的終點 */
1
2
3
justify-content: space-between /* 均分空間至元素間 */
1
2
3
justify-content: space-around /* 均分空間至頭、尾、元素間 */
1
2
3
align-items
決定子元素垂直於主軸（flex-direction）的對齊方式，預設為stretch。
align-items: flex-start /* 對齊容器方向的起點 */
1
2
3
align-items: center /* 置中 */
1
2
3
align-items: flex-end /* 對齊容器方向的終點 */
1
2
3
align-items: stretch /* 延展至容器 */
1
2
3
align-items: baseline /* 對齊子元素基準線 */
1
2
3
align-content
當子元素有多行的時候（flex-wrap屬性必須為wrap），決定子元素垂直於主軸（flex-direction）的對齊方式，預設為stretch。
基本與align-items一樣，而多行的時候因為有行與行之間的距離，所以多了 space-around 與 space-between 兩種方式。
align-content: space-between /* 對齊容器方向的起點 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-around /* 置中 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
子元素屬性：決定自身(子元素)排列方式與樣式
order
決定自身在容器中的排列順序，預設皆為0，所以會根據網頁DOM順序排列下去，數值越大則排序越後面。
1 (order:3)
2 (default)
3 (order:2)
4 (default)
flex-grow
決定自身長度延展的倍數，會根據同一個容器中的子元素之flex-grow值作計算，預設為0。延展的空間為容器剩餘的所有空間。
1 (flex-grow:1)
2 (default)
3 (default)
4 (default)
因為預設為0，所以若容器中只有一個子元素設定大於 0 的 flex-grow 值，就會佔滿剩餘空間。
1 (flex-grow:1)
2 (default)
3 (flex-grow:2)
4 (default)
由子元素1和子元素3來佔滿容器，分別比例為1:2。
flex-shrink
與 flex-grow 相反，flex-shrink是當元素佔滿容器的時候，決定自身長度收縮的程度，數值越高，收縮比例越大，預設為1。（這個屬性要在父元素flex-wrap為nowrap的情況下才有效果）
1 (flex-shrink:0)
2 (default)
3 (flex-shrink:2)
4 (default)
5 (default)
6 (default)
7 (default)
8 (default)
（以上子元素預設寬度為150px，當flex-shrink值為0時才會維持原本寬度）
flex-basis
設定自身的起始長度，可能會因父容器nowrap與自身shrink值而改變長度。
1 (flex-basis:250px)
2 (default)
3 (default)
4 (default)
flex
flex-grow, flex-shrink 與 flex-basis 的簡式。
flex: {flex-grow} {flex-shrink} {flex-basis}
align-self
決定自身垂直於主軸（flex-direction）的對齊方式，會覆寫父元素 align-items 的值。
1
2 (align-self: flex-end)
4 (align-self: flex-start)
4 (align-self: center)
---------------------
了解flexbox的各項屬性後，在網頁Layout的處理上就更容易了！
大家可以多多嘗試，就會發現它的好用之處。
也可以到 這裡 作練習唷！
[CSS] 網頁設計教學超入門：網頁排版的方式總集篇
內容大綱
html: table
原本table設計用來就是呈現複雜資料的一種html tag，但在早期也常被用來作為網頁的排版，甚至現在精美的email樣式也都仍然是用table來排版。
然而因為其複雜的html程式結構，還有樣式設定的彈性較低，在重視SEO且行動裝置普及的現在，已經不再適合作為網頁排版的方式。
以table排版的網頁經常看到這樣的複雜巢狀結構
css: float
後來使用div標籤（即division，部分、區塊）已成為網頁排版的主流。只要在div上設定其CSS的float屬性就能根據內容大小靠左或靠右，並且讓接續的文字環繞在旁。
常見的文繞圖就是再接續文字區塊的<img>上設定 float: left 或 float: right 。
在bootstrap 3 的grid system也是以float作為排版方式
另外要注意的是float效果在position: absolute的元素上是無效的。
立刻來玩玩 https://www.w3schools.com/cssref/pr_class_float.asp
css: flex
雖然float在排板上已經相較於table容易許多了，但還是有很多問題無法解決，例如：對齊、垂直排列、clear等等。
而flex的出現簡直就是救星！flex要注意的是外容器與內元素分別要設定的屬性是不同的，
並且要先在外容器設定 display:flex 或 display:inline-flex ，才能繼續設定外容器與內元素的flex相關屬性。
在bootstrap 4 的grid system也改以flex的方式作為排列方式。
不過flex能玩的東西太多了，後續會再寫一篇flex專篇來介紹！
css: grid
真正為了排版而生的css屬性終於誕生了！
不僅可以調整排列方向、對齊方式，還能夠直接設定欄、列數，以及欄、列的間隔，不用再自己計算50%或33.33%了！
與flex類似有外容器及內元素的概念，須設定外容器為 display: grid 或 display:inline-grid 。
但新的東西總是會遇上支援度不足的問題，在IE瀏覽器就無法使用grid屬性。
與grid相關的屬性也會在後續寫一篇為大家作介紹！