一、知识点
-
flex容器里的项目如果没有设置高度，那么项目高度默认和容器一样高；
-
flex项目默认横向排列，不会自动换行，会直接挤压项目的宽度，不管项目是否设置了宽度；
-
如果设置了换行，比如换成了3行，那么3行会充满容器的高度；
二、速查手册
| 属性 | 作用 |
|---|---|
| flex-direction | 设置主轴方向，如row水平（默认），column垂直 |
| flex-wrap | 是否换行,默认(nowarp)不换，wrap(换行) |
| flex-flow | flex-direction和flex-wrap简写，如：row wrap |
| justify-content | 主轴对齐方式（水平对齐方式） flext-start 左对齐，默认 flex-end 右对齐 center 居中对齐 space-between 两端对齐，中间均匀分配间隙 space-around 每个项目两端空隙一样 space-evenly 所有空隙一样 |
| align-items | 交叉轴垂直对齐，单行时使用 stretch 拉伸，如果项目没有设置高度，那么拉伸到和容器一样高 center 垂直居中，最常用 |
| align-content | 多行时，垂直对齐方式，其实就是justify-content的垂直版本，值也一样，单行时无效 |
| order | 控制排序，默认0，值越大排的越往后 |
| flex-grow | 剩余空间分配，默认0，如果把某个项目设置1，那么它就占剩余 空间 |
| flex-shrink | 空间不足时是否压缩，默认值1，压缩，设置为0就是绝不压缩 |
| flex-basis | 设置元素基准尺寸，不知道有啥用 |
| flex | flex: grow shrink basis的简写，常用就是1，占用剩余空间 |
| align-self | 单独修改某个项目垂直对齐方式 |
| gap | 设置项目的间距，用在父元素，比margin好用，不会有额外边距 |