flex布局
区别与特性
- 与传统布局对比：
- 传统布局：基于盒状模型，依赖 display，position，float属性，实现特殊布局很繁琐
- flex布局：它是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力，所以它能很简单地实现一些特殊布局。
- 特性与概念：
- 任何一个容器（div）都可以使用flex布局
- 采用flex布局的元素被成为flex容器，所有子元素都会成为它的成员。
- 采用flex的元素其float，clear都会失效
- 一维的特性使其拥有两根轴，水平的主轴与垂直的交叉轴（默认主轴排列）
容器属性的使用
- flex-direction属性
flex-direction属性决定主轴的方向
| 属性值 | 作用 |
| row | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| colmun | 主轴为垂直方向，起点在上端 |
| colmun-reverse | 主轴为垂直方向，起点在下端 |
- flex-wrap属性
flex属性定义在一条轴线上子成员发生拥挤，如何换行排列。
| 属性值 | 作用 |
| nowrap | 不换行（将子成员宽度缩小） |
| wrap | 换行且第一行在上方 |
| wrap-reverse | 换行且第一行在下方 |
- justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
| 属性值 | 作用 |
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，且间隔相等 |
| space-around | 每个子成员间隔相等 |
- align-items属性
align-items属性定义项目在交叉轴上如何对齐。
| 属性值 | 作用 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
- align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
| 属性值 | 作用 |
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| baseline | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch | 轴线占满整个交叉轴 |
| #### 项目属性的使用 |
- order：
定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数
order:-1; 复制代码
- flex-grow：
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间
flex-grow:1; 复制代码
- flex-shrink:
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-shrink:0; 复制代码
- flex-basis:
指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width
flex-basis:100%; 复制代码
- align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性
align-self:flex-end;
