1.Flex之前
- 布局的传统解决方案，基于盒模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如垂直居中就不容易实现。
- 传统布局主要使用：
normal flow（正常流，也称文档流）
float+clear
position: absolute+relative
display inline-block
负margin
2.Flex来了
-
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
- Flex 布局将成为未来布局的首选方案。
- Flex布局的特点：
1.块级布局侧重垂直方向，行内布局侧重水平方向，flex布局是与方向无关的。
2.flex布局可以实现空间的自动分配，自动对齐(flexble：弹性、灵活)。
3.flex适用于简单的线性布局，更复杂的布局要交给grid布局(还没发布)。
3.基本概念
4.与父元素有关的属性
1.flex-direction：定义弹性布局中元素的排列方式。
| 值 | 意义 |
|---|---|
| row | 使子元素从左向右排列 |
| row-reverse | 使子元素从右向左排列 |
| colume | 使子元素从上向下排列 |
| colume-reverse | 使子元素从下往上排列 |
2.flex-wrap：定义弹性布局中的换行和换行后的排列。
| 值 | 意义 |
|---|---|
| nowrap | 默认值，设置该容器里的弹性元素不换行 |
| warp | 设置该容器里的弹性元素在必要时换行 |
| wrap-reverse | 设置该容器里的弹性元素在必要时换行，并且反向排列 |
3.flex-flow：flex-direction与flex-wrap的简写，用法为：flex-flow： row nowrap；意思是设置flex-direction为row，设置flex-wrap为nowrap。
4.justify-content：设置主轴方向的对齐方式。
| 值 | 意义 |
|---|---|
| space-between | 将行内的空格均匀分布在各个子元素中间 |
| space-around | 将行内的空格均匀放置在各个元素周围 |
| flex-start | 使元素聚集在起点 |
| flex-end | 使元素聚集在结尾 |
| center | 使元素居中 |
5.align-items：设置侧轴方向的对齐方式。
| 值 | 意义 |
|---|---|
| stretch | 子元素被拉伸以适应容器 |
| center | 子元素位于父元素的中心 |
| flex-start | 子元素聚集在起点 |
| flex-end | 子元素聚集在结尾 |
| baseline | 子元素位于容器的基线上 |
6.align-content：控制弹性布局中的行间距样式
| 值 | 意义 |
|---|---|
| space-between | 将空格分布在各个空间中 |
| space-around | 将空格分布在行的周围 |
| flex-start | 所有元素往侧轴的起点靠 |
| flex-end | 所有元素往侧轴的终点靠 |
| center | 所有项目聚集在侧轴的中心 |
5.根子元素有关的属性
1.flex-grow：用于定义子元素填充其他空白的比例。
例如：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
意义为第一个子元素包含空间的五分之一，第二个子元素包含空间的五分之三，第三个子元素包含空间的五分之一。
2.flex-shrink：用于定义父元素宽度不够时的收缩比例。
3.flex-basis：定义元素的原始大小。
4.flex：上面三个元素的缩写。
5.order：可以定义元素排列的顺序。
6.align-self：定义其中某个元素的对齐方式。
