flex弹性盒布局
一.如何将一个容器设置为弹性容器
要想将一个容器变为弹性容器，只需指定它的display为flex或者inline-flex。
指定一个容器为块级弹性容器
display: flex;
指定一个容器为行内弹性容器
display: inline-flex;
弹性容器内的的元素被称为弹性元素，也被叫做项目，弹性元素会失去原有的类型特性（比例块级元素会不占一行）
同时，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
比如一下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-box
{
margin: 50px 0;
background-color: blue;
display:flex
}
.inline-box
{
background-color: pink;
display: inline-flex;
}
.flex-box>div,.inline-box>div
{
height: 50px;
width: 50px;
margin: 30px 30px;
background-color: green;
font: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="inline-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
效果图
可以看到，本该是独占一行的块级div却全部排列在同一行，他们成为了弹性元素后失去了原有的块级元素性质
二.设置弹性容器中弹性元素的排列方式
flex-deretion属性
设置弹性元素的flex-deretion就可指定弹性元素的排列方式
| 属性值 | 说明 |
|---|---|
| row | 默认值，弹性元素水平排列 |
| cloumn | 弹性元素垂直排列 |
| row-reserve | 指定弹性元素水平方向排列 |
| column-reverse | 指定元素垂直反向排列 |
效果图：
三.设置弹性元素的换行
| 属性值 | 说明 |
|---|---|
| wrap | 指定弹性元素自动换行 |
| nowrap | 默认值，指定弹性元素不换行 |
| wrap-reserve | 指定弹性元素自动反向换行 |
当修改如下红框内的代码，并且浏览器窗口过小是，会造成flex-box元素内的孩子溢出。
此时修改flex-box元素的换行，便可防止溢出了。
四.主轴与垂轴
1.概念
主轴（main axis）：主轴规定了弹性元素排布的顺序
垂轴（cross axis）：垂轴决定了弹性元素在发生换行后，第二行元素的添加方向
垂轴时时刻刻和主轴相互垂轴。
在主轴上，内容开始的那一边被称为起边（main start），内容流向的那一端，被称为终边（main end）。
同理，在垂轴上，内容开始的那一边被称为起边（acoss start），内容流向的那一端，被称为终边（acoss end）。
2.flex-deretion和flex-wrap对主轴和垂轴方向的影响
flex-deretion决定了主轴的方向
在默认情况下（flex-deretion: row），主轴的方向是水平向右的，盒子会这样排列
当给flex-deretion不同的属性值是，产生如下现象（此图取至《零基础入门学习Web开发》）
同样的，flex-wrap决定了垂轴的方向，值得注意的是，只有flex-wrap不是nowrap，垂轴的方向才有意义。
这里同样引用图片，不再赘述。
补充：flex-flow是flex-deretion和flex-wrap的复合属性，第一个值是flex-deretion，第二个值是flex-wrap。
五.主轴与垂轴上的对齐方式
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，弹性元素靠主轴起边 |
| flex-end | 弹性元素靠主轴终边 |
| center | 弹性元素在主轴居中 |
| space-between | 第一个元素靠主轴起边，最后一个元素靠主轴终边，其他元素均匀排放 |
| space-around | 所有弹性元素均匀排放，元素之间的间距不折叠 |
| space-evently | 所有元素均匀排放，元素间的间距折叠 |
效果图如下：
align-items属性
align-items属性定义项目在垂轴上如何对齐。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，弹性元素靠垂轴起边 |
| flex-end | 弹性元素靠垂轴终边 |
| center | 弹性元素在垂轴居中 |
| baseline | 弹性元素向基线对齐 |
| stretch | 默认值，弹性元素拉伸以占据整个垂轴的尺寸 |
效果图如下：
以主轴水平向右为例
注：在bseline中的黑线，就是文字的基线。
align-content属性
align-content和align-items的作用是一样的，决定了弹性元素在垂轴上的对齐方式。
align-content的属性值和说明如下：
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，弹性元素靠垂轴起边 |
| flex-end | 弹性元素靠垂轴终边 |
| center | 弹性元素在垂轴居中 |
| space-between | 第一个元素靠垂轴起边，最后一个元素靠垂轴终边，其他元素均匀排放 |
| space-around | 所有弹性元素在垂轴均匀排放，元素之间的间距不折叠 |
| stretch | 默认值，弹性元素拉伸至占满整个垂轴 |
效果图不再展示，主要讲一下align-content和align-items的区别
| 属性 | 说明 |
|---|---|
| align-content | 以整个弹性元素进行定位 |
| align-items | 以弹性元素的内容进行定位 |
以属性值为center来展示他们的区别
可以较为明显的看到，align-content中的弹性元素的顶边是对齐的，align-items是不对齐的，它们是以中心线对齐的。
align-self
align-self为弹性元素单独设置在垂轴上的对齐方式，默认值为auto，设置align-self时，会覆盖align-items。
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
| 属性值 | 说明 |
|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch” |
| flex-start | 默认值，弹性元素靠垂轴起边 |
| flex-end | 弹性元素靠垂轴终边 |
| center | 弹性元素在垂轴居中 |
| stretch | 弹性元素拉伸至占满整个垂轴 |
| baseline | 元素位于容器基线上 |
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
默认项目的排列顺序是按我们写的顺序来排列的，写在前面的排在前面。现在可以通过设置order属性来改变排列顺序。
六.“弹性”
flex-shrink属性
之所以flex叫做弹性盒布局，是有原因的。但弹性元素的总宽度不超过弹性容器的宽度，则弹性元素正常显示。但如果弹性元素的总宽度超过弹性容器的宽度，弹性容器便会体现他的“弹性”，为了防止弹性元素溢出，弹性容器会压缩弹性元素，使其不溢出（外边距和内边距无法压缩，压缩其内容）。如果超过可以压缩的内容，弹性元素仍然会溢出。
在压缩过程中，控制各个弹性元素压缩比例的属性就叫做flex-shrink属性。
flex-shrink属性值默认是1，负值对该属性无效，为0时代表不压缩该弹性元素。
ps：现在各个弹性元素的flex-shrink属性分别为1，2，2。而需要压缩的总空间是250px，则分配给各个元素的压缩空间就是50px，100px，100px。
flex-grow属性
与flex-shrink相反，但弹性容器仍有剩余空间时，设置它的属性值可以给弹性元素分配空间，使其放大。
flex-grow: <number>; /*default 0*/
各个弹性元素flex-grow的默认值是0，代表不放大。
分配空间是按照各个弹性元素flex-grow的比例分配。
flex-basis属性
flex-basis设置弹性元素在没有使用flex-shrink和flex-grow属性值时在主轴上的初始尺寸。其默认值时auto，表示原来的的尺寸。
flex-basis: <length> /*default：auto*/
当主轴时水平的时候，设置flex-basis与设置width是一样的效果。
当主轴垂直时，设置flex-basis与设置height是一样的效果。
（注：当主轴水平时，flex-basis会覆盖width，当主轴垂直的时候，flex-basis会覆盖width。）
flex属性
flex是复合属性，代表flex-grow，flex-shrink，flex-basis的简写，默认是 0 1 auto。有两个快捷属性可以选择。
flex: <flex-grow flex-shrink flex-basis> /*default: 0 1 auto*/
flex:auto /*1 1 auto*/
flex:none /*0 0 auto*/
（想要BFC又不发生外边距的折叠可以用flex）