flex弹性布局
特点：操作方便，布局极为简单，布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
flex 布局原理
flex 是 flexible Box的缩写，意为弹性布局，用来为盒装模型特供最大的灵活性，任何一个容器又可以指定为flex布局。
- 父元素设为 flex 布局以后，子元素的
float、clear和vertical-align属性将失效。 - 采用flex布局的元素，成为flex容器（flex container） ,简称 "容器"。他的所有子元素自动成为容器成员，成为flex项目 （flex item ）,简称项目
- 采用flex布局行内元素直接可以设置高度和宽度，无需元素转换。
我们flex布局其实就是给父元素添加flex属性，控制子元素的位置和排序方式。
flex父项常见属性
- flex-direction :设置主轴的方向
- justify-content: 设置 主轴上子元素的排列方式
- flex-wrap : 设置 子元素是否换行
- align-content: 设置侧轴上的子元素的排序方式（多行）
- align-items: 设置侧轴上的子元素的排序方式（单行）
- flex-flow: 复合属性，相当于同时设置了flex-direction 和flex-wrap
flex-direction
啥主轴，侧轴？其实在我们弹性布局中，分成主轴和侧轴，同样的叫法还有，行 和列，x和y轴
默认的主轴方向是 x轴方向，水平向右，侧轴方向y轴，垂直向下
主轴侧轴是可以设置的，flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素就是跟着主轴来排列的。
| 值 | 描述 |
|---|---|
| row | 默认值。水平从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
我们可以感受一下row-reverse 效果
div {
display:flex;
width: 800px;
height: 300px;
flex-direction:row-reverse;
background-color: purple;
}
div span {
width: 150px;
height: 200px;
background-color: pink;
border: black solid 1px;
}
采用flex布局行内元素直接可以设置高度和宽度，无需元素转换。
如果flex-direction:column; 竖直方向排列，我们会发现大盒子装不下的，但是会这样码？
我们会发现装不下，项目会自动适应的——按照我们设定数据的等比例缩
justify-content
设置 主轴上子元素的排列方式
| 排列方式 | 描述 |
|---|---|
| flex-start | 默认值。从头部开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在主轴上上居中对齐。 |
| space-between | 先两边贴边，平分剩余的空间作为间距 |
| space-around | 在平分剩下空间,作为间距 |
flex-end
原来的居中对齐很麻烦，但是现在就不一样了
div {
display:flex;
width: 800px;
height: 300px;
justify-content: center;
background-color: purple;
}
就可以简单的实现了。
space-around :在平分剩下空间,作为间距
**space-between**:先两边贴边，平分剩余的空间作为间距
flex-wrap
设置 子元素是否换行， nowrap 不换行，wrap换行
flex默认值是nowrap的，也就是即使一行装不下了都不会换行，而是项目会自动适应的—— 按照我们设定数据的等比例缩放。
align-items
那么如何控制侧轴的排布呢？align-items就是来干这个的。
align-items: 设置侧轴上的子元素的排序方式，适合只有一行情况。
| 排列方式 | 描述 |
|---|---|
| flex-start | 从头部开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在主轴上上居中对齐。 |
| stretch | 默认值。元素被拉伸以适应容器。 |
这个和前面的布局一样，只不过还多一个了stretch
如何实现子元素垂直水平都居中呢？
justify-content: center;
align-items: center;
**stretch:**各行将会伸展以占用剩余的空间。如果主轴是x轴，那么如果不设置高度的话，就会被拉伸，占掉父元素的剩余空间。
align-content
align-content: 设置侧轴上的子元素的排序方式，适合子项换行的情况（多行的情况）
| 排列方式 | 描述 |
|---|---|
| flex-start | 默认值。从头部开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在主轴上上居中对齐。 |
| space-between | 先两边贴边，平分剩余的空间作为间距 |
| space-around | 在平分剩下空间,作为间距 |
| stretch | 默认值。元素被拉伸以适应容器。 |
效果和前面大同小异，不在赘述。
align-items 在多行下无效，align-content 在单行下无效。
一句话，单行找align-items ，多行找，align-content
flex-flow
flex-flow: 复合属性，相当于同时设置了flex-direction 和flex-wrap
其实就是他们两个的简写，例如：flex-direction: row-reverse;flex-wrap: nowrap; 等于
flex-flow: row-reverse nowrap;
子项常见属性
假如前面大盒子的属性来控制子盒子的属性像是在吃大锅饭，那么子盒子的属性就是给自己开小灶。
- flex 定义子项占剩余空间的 权重,
- align-self 控制子项自己的在侧轴的排序方式
- order 定义子项的排列顺序
flex
.item {
flex:<number> ; /*默认为0*/
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
section {
display: flex;
width: 1000px;
height: 150px;
background-color: pink;
margin:0 auto;
}
section div:nth-child(1){
width: 100px;
height: 100px;
flex: 2;
background-color: red;
}
section div:nth-child(3){
width: 100px;
height: 100px;
flex: 2;
background-color: blue;
}
section div:nth-child(2){
height: 100px;
flex: 2;
background-color: purple;
}
我在这里把他们的权重都设置成2， 那么他们应该等分才对，事实的确如此。
如果我把第二个盒子的权重改成1 那么它应该占 1/5的宽度，也就是200px。
align-self
align-self 控制子项自己的在侧轴的排序方式,参数和前面的一样
| 排列方式 | 描述 |
|---|---|
| flex-start | 默认值。从头部开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在主轴上上居中对齐。 |
| space-between | 先两边贴边，平分剩余的空间作为间距 |
| space-around | 在平分剩下空间,作为间距 |
| stretch | 默认值。元素被拉伸以适应容器。 |
order
order定义子项的排列顺序
.item {
order:<number> ; /*默认为0*/
}
数值越小越靠前，和z-index 不一样。
