想要簡單輕便的實現網頁自適應式排版，要使用哪一種語法呢？
Flexbox長於小規模佈局，而Grid layout則適於大規模佈局。
● 需要具備哪些知識：基本的HTML,CSS語法。
● 哪些人適合學習？
1.只會基本網頁語法的設計師
2.想要在既有框架下(ex.C/S系统、Adobe Experience Manager)客製化區塊布局
3.所有想快速製作單一簡單頁面的人
Flexbox是單向度的排版，Grid則是包含X軸和Y軸的平面排版方式。
如果你想要簡單輕便的實現單一軸向的自適應式排版，例如導覽列、卡片式排版、相簿等，可以選擇使用Flexbox。如果你想快速實現雙軸平面式，甚至不規則的排版(像平面設計排版那樣的自由)，那麼使用Grid layout會更適合也更快速。
Flexbox簡介
Flexbox layout 是基於display:flex或是display: inline-flex的語法，以單向度主軸或交叉軸為方向的排版。
這個語法透過 flex-flow 的各項數值能輕易的實現適應式排版， flex-flow 能決定排版以實際物理的方向 (上/右/下/左)、直行或橫列排版(row/ column)以及Flex item 遇到Flex Container的寬度極限時，超出或換行排列。 flex規定元素如何伸長或縮短以適應flex容器中的可用空間。
Flexbox的語法
∙ display
首先，必須先將display設為flex或是inline-flex才能運作，這兩者的差別是 block-level 和 inline-level 的差異，通常直接設定為flex就可以了。
關於block-level和inline-level更詳細的解釋可以參考這裡。
display: flex | inline-flex;∙ flex-direction
直行或橫列排版，也可以使之反向。用來決定內容元素的方向。d
flex-direction: row | row-reverse | column | column-reverse;∙ flex-wrap
決定內容元素撐滿容器寬度時，是否換行。在自適應式排版時會是重要的功能。
flex-wrap: nowrap | wrap | wrap-reverse;∙ order
控制元件的順序，在自適應時很好用，可以將某些元件順序上提。
order: 數字整數;∙ flex-flow
flex-direction和flex-wrap簡化版本，可以將兩個數值寫在一起。
flex-flow: <‘flex-direction’> | <‘flex-wrap’>∙ flex
Flexbox最重要的數值，分別是flex-grow、flex-shrink 和flex-basis。規定元素如何伸長或縮短以適應flex容器中的可用空間。
- flex-grow 決定了元素的增長值，預設是0，是一個不帶單位的數字。當容器剩餘空間>子元素加總空間時，每個元素分配剩餘空間的值。設置flex-grow為 1 ，子元素允許自動填滿剩餘空間。
- flex-shrink 決定了元素的收縮值，預設是1，是一個不帶單位的數。當容器剩餘空間<子元素加總空間時，每個元素對於多出剩餘空間縮減的值。設置flex-shrink為 0 的子元素不允許收縮。
- flex-basis 是元素的初始大小，預設是auto。這個值是一個帶單位的數字。
flex: none | [ <‘flex-grow’>|<‘flex-shrink’>|<‘flex-basis’>]用這個國旗的例子來試試看吧🇫🇷
∙ align-items
用來使元素在交叉軸方向上(垂直線)對齊
align-items: flex-start | flex-end | center | stretch∙ justify-content
屬性用來使元素在主軸方向上(水平線)對齊
justify-content: flex-start | flex-end | center | baseline | stretch以上是各項數值的介紹，如果想要深入了解，可以閱讀W3C的文件，裡面有更詳細的介紹。
透過下面範例實際調整各個參數玩玩看🙌
實際應用 Takeout
參考資料
Basic concepts of flexbox
深入解析CSS Flexbox
謝謝你看到這裡，歡迎分享！
Hello，我是Vera，總是在思考優化工作流程方法的Designer，喜歡設計、藝術和文學。
如果有任何建議或合作提案可以透過以下這些方式聯繫。
Behance ｜ Dribbble ｜ Website
