Flex之前的布局
主要使用：
- normal flow(正常流或叫文档流）
- float+clear
- position relative+absolute
- display inline-block
- 负margin（小技巧）
Flex布局——CSS3中新的布局方式
特点：
- flex布局与方向无关
- 可实现空间的自动分配、自动对齐
- 用于简单的线性布局，更复杂的用grid布局
-
父元素加上display：flex可使子div排列成行
图1
Flex属性
- flex container的属性
- 方向：
| flex-direction:row | 从左往右以行展示 |
|---|---|
| flex-direction:row-reverse | 反向以行展示 |
| flex-direction:colum | 从上往下以列展示 |
| flex-direction:column-reverse | 反向以列展示 |
- 换行：
| flex-wrap:wrap | 换行 |
|---|---|
| flex-wrap:no wrap | 不换行 |
- 方向-换行简写：
| flex-flow:row wrap | 以行展示并可换行 |
|---|---|
| flex-flow:column wrap | 以列展示并可换列 |
- 主轴方向对齐方式：
| justify-content:sapce-between | 空隙放中间 |
|---|---|
| justify-content:space-around | 空隙环绕四周 |
| justify-content:flex-start | 往前靠 |
| justify-content:flex-end | 往后靠 |
| justify-content:center | 居中 |
- 侧轴方向对齐方式：
| align-items:stretch | 所有元素伸展为最高 |
|---|---|
| align-items:flex-start | 往上靠 |
| align-items:flex-end | 往下靠 |
| align-items:center | 居中 |
| align-items:baseline | 容器基线上（不常用） |
- 多行/列内容的对齐方式（较少用）
align-content:stretch|伸展以适应容器（默认）
其他与上面类似，不表
- flex item的属性
- 多余空间的分配：（默认为0）
| flex-grow:1 | 该item占1份 |
|---|---|
| flex-grow:2 | 该item占2份 |
| flex-grow:3 | 该item占3份 |
- 空间不够时，收缩比例：flex-shrink:1（默认为1）
- 默认大小（一般不用）：flex-basis：100px（默认auto）
- 以上三个缩写 flex:1 2 100px;
- 顺序 order
- 某个子项单独的对齐方式：
| align-self:center | 居中 |
|---|---|
| align-self:stretch | 伸展适应容器 |
| align-self:flex-start | 靠容器开头 |
| align-self:flex-end | 靠容器后头 |
