[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)