[TOC] > #### display: flex 將一個div的`display`設置為`flex`后，其中子元素默認橫向(row)排列 `flex-direction`：設置子元素的排列方向 row --默認(從左到右） column --列排列（從上至下） row-reverse column-reverse > #### flex 子元素對齊方式 ``` justify-content--設置子元素水平方向的對齊方式 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly align-items--設置子元素垂直方向的對齊方式 align-items: flex-start | flex-end | center | stretch | baseline stretch--高度拉伸為100% baseline--沿基線對齊（子元素第一行文字底部對齊） ``` ``` align-self--設置自身垂直的對齊方向 align-self: flex-start | flex-end | center ``` > #### flex 子元素的排列間隔 ``` justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly; space-between: 兩端對齊，子元素之間間隔相對(0 1 1 1 0) space-around: 子元素之間間隔相等，比子元素到父元素的間隔大一倍(0.5 1 1 1 0.5) space-evenly: 父元素與子元素之間和子元素之間間隔相等 (1 1 1 1 1) ``` > #### flex子元素的單個寬度或高度比例 給子元素設置flex的值，如`flex: 1`, `flex: 2`改變子元素寬度占比 給子元素設置`flex-direction: column`，將排列改為豎排排列，再設置`flex: 1`, `flex: 2`即可改變子元素高度占比 > #### 設置子元素的排列順序 `order: 1`可改變子元素水平方向的排列順序，數值越小，放在越前面，默認為0 附加： ``` flex-wrap: 設置子元素是否會換行，默認nowrap不換行(nowrap | wrap | wrap-reverse) flex-flow: flow-direction | flow-wrap ``` ***** 參考[阮一峰flex詳解](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)