2018-12-25，flex布局

flex布局的属性：

---

flex-container的属性有flex-direction,  flex-wrap,  justify-content,  align-items,  align-content

flex-direction(主轴方向): 

1) row（布局为一行，从start开始排）

2) row-reverse(布局为一行，从end开始排)

3) column(布局为一列，从start开始排)

4) column-reverse(布局为一列，从end开始排)

flex-wrap(一条轴线排不下如何换行)：

1) nowarp (不换行，在一行显示)

2) wrap(内容超过后换行)

3) warp-reverse(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)

justify-content(主轴对齐方式)：

1) flex-start (start侧对齐，左对齐)

2) flex-end(end侧对齐，右对齐)

3) center(中心对齐)

4) space-between(左右两侧没有间距，中间间距相同)

5) justify-content:space-around（左右两侧的间距为中间间距的一半）

align-items(交叉轴对齐方式)：  

1）align-items:stretch;   (拉伸)

2）align-items:flex-start（start侧开始，上对齐）

3）align-items:flex-end（end侧开始，下对齐）

4）align-content :center (中心对齐)

5）align-items:baseline（基线对齐）

align-content(多根轴线对齐方式)：  

1）align-content :stretch  (拉伸)

2）align-content :flex-start  (start侧开始，上对齐)

3）align-content :flex-end（end侧开始，下对齐）

4）align-content :center  (中心对齐)

5）align-content:space-between（上下没有间距，中间各子元素间距相同）

6）align-content:space-around  (上下间距之和等于中间各个间距)

---

flex-item相关属性有order，flex-grow，flex-shrink，lex-basis，align-self

order(排列顺序)

flex-grow（放大比例，剩余空间怎么分配,如下图所示，剩余空间的分配比例是1:2:1）

flex-shrink （缩小比例，超出空间怎么压缩）

flex-basis  (item所占主轴空间，优先级高于width)

align-self  (对齐方式，覆盖align-items)

---

转自：https://blog.csdn.net/Allenyhy/article/details/81605547 

参考链接：

http://www.runoob.com/w3cnote/flex-grammar.html

https://www.cnblogs.com/module/p/5578533.html

https://www.css88.com/archives/7760