超Q的弹性盒子——flex✨
还记得小时候的QQ糖吗，超Q的口感。
而在布局中所使用的弹性盒子也会让你在开发中QQ弹弹
Come on baby
为什么说它超弹呢？
- 与传统布局对比：
- 传统布局：基于盒状模型，依赖 display，position，float属性，并且它对于那些特殊布局非常不方便，比如，无法直接实现垂直居中
- flex布局：它是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力，所以它能很简单地实现一些特殊布局。
- 它的特性与概念：
- 任何一个容器（div）都可以使用flex布局
- 采用flex布局的元素被成为flex容器，所有子元素都会成为它的成员。
- 采用flex的元素其float，clear都会失效
- 一维的特性使其拥有两根轴，水平的主轴与垂直的交叉轴（默认主轴排列）
Q弹的配料之flex属性
在flex容器中加入六种配料即六种属性，让布局更简单！
- flex-direction属性
flex-direction属性决定主轴的方向
| 属性值 | 作用 |
| row | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| colmun | 主轴为垂直方向，起点在上端 |
| colmun-reverse | 主轴为垂直方向，起点在下端 |
.flex-box { flex-direction: row ; flex-direction: row-reverse ; flex-direction: column ; flex-direction: column-reverse ; } 复制代码
2. flex-wrap属性
flex属性定义在一条轴线上子成员发生拥挤，如何换行排列。
| 属性值 | 作用 |
| nowrap | 不换行（将子成员宽度缩小） |
| wrap | 换行且第一行在上方 |
| wrap-reverse | 换行且第一行在下方 |
.flex-box { flex-wrap: nowrap ; flex-wrap: wrap ; flex-wrap: wrap-reverse; } 复制代码
3. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
| 属性值 | 作用 |
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，且间隔相等 |
| space-around | 每个子成员间隔相等 |
.flex-box { justify-content: flex-start ; justify-content: flex-end ; justify-content: center ; justify-content: space-between ; justify-content: space-around ; } 复制代码
4. align-items属性
align-items属性定义项目在交叉轴上如何对齐。
| 属性值 | 作用 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
.flex-box { align-items: flex-start ; align-items: flex-end ; align-items: center ; align-items: baseline ; align-items: stretch ; } 复制代码
5. align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
| 属性值 | 作用 |
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| baseline | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch | 轴线占满整个交叉轴 |
.flex-box { justify-content: flex-start ; justify-content: flex-end ; justify-content: center ; justify-content: space-between ; justify-content: space-around ; justify-content: stretch; } 复制代码
