flex布局，即弹性布局。
常用属性：
flex-direction:
设置主轴方向，默认为x轴(row)。
row-reverse从右往左。
column从上到下。
justify-content:
设置主轴上子元素的排列方式。
flex-start,center,space-around(自己平分剩余空间),space-between(先两边贴边)
flex-wrap:
设置子元素是否换行。
nowrap:不换行。 wrap：换行。
align-items：
设置侧轴上的子元素的排列方式，（注意这里是单行！）
flex-start(从上到下),center(挤在一起居中),stretch(拉伸，默认)
align-content:(多行)
flex-start,center,stretch,space-between,space-around
align-self:
flex子项单独在侧轴（纵轴）方向上的对齐方式。
flex布局的应用：
用于圣杯布局，实现左右固定，中间自适应。
主要步骤：
①header和footer横向撑满。
②写好container、left、center、right。
③给container设置display: flex。
④left和right定宽，center设置 flex: 1。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex实现圣杯布局</title>
<style>
body {
min-width: 500px;
}
#header, #footer {
background-color: gray;
text-align: center;
height: 100px;
line-height: 100px;
}
#container .column {
text-align: center;
height: 300px;
line-height: 300px;
}
#container {
display: flex;
}
#center {
flex: 1;
background-color: red;
}
#left {
width: 150px;
background-color: green;
}
#right {
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="left" class="column">center</div>
<div id="center" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
注意：要在父容器里面设置display:flex
flex:number 表示占多少份数
