Flex布局，也叫做弹性伸缩布局，这种布局方式，是为了兼容移动端的多屏幕而生的，很适合用于开发 响应式 的网站。
要理解Flex布局并不难，分为空间、方向、位置三点。
代码
body {
display: flex;
}
#header {
background: #FF6A6A;
flex-grow:1;
}
#main {
background: #C0FF3E;
flex-grow:3;
}
#footer {
background: #00BFFF;
flex-grow:1;
}
<body>
<div id="header">头部</div>
<div id="main">内容</div>
<div id="footer">尾部</div>
</body>display: flex; 把容器设置成一个Flex的盒子。
flex-grow 空间的划分，我们这里等比例分成了1、3、1三份。
效果
根据空间默认规划出来的元素排版，是横向的，我们可以修改成纵向。
body {
display: flex;
flex-direction: column; <!-- 默认是 flex-direction: row; -->
}
#header {
background: #FF6A6A;
flex-grow:1;
}
#main {
background: #C0FF3E;
flex-grow:3;
}
#footer {
background: #00BFFF;
flex-grow:1;
}
<body>
<div id="header">头部</div>
<div id="main">内容</div>
<div id="footer">尾部</div>
</body>我们还可以反转顺序，把元素的顺序改成尾部、内容、头部。分别对应row-reverse和column-reverse。
效果
位置主要是元素的一些对齐方式。
body {
display: flex;
flex-direction: column;
}
#header {
background: #FF6A6A;
flex-grow:1;
display: flex; <!-- 对齐或者空间分割之前，记得把容器设置成Flex盒子。-->
justify-content: center; <!-- 水平居中 -->
}
#main {
background: #C0FF3E;
flex-grow:3;
display: flex;
align-items: center; <!-- 垂直居中 -->
}
#footer{
background: #00BFFF;
flex-grow:1;
display: flex;
justify-content: center; align-items: center; <!-- 水平居中 & 垂直居中 -->
}
<body>
<div id="header">水平居中</div>
<div id="main">垂直居中</div>
<div id="main">水平居中 & 垂直居中</div>
</body>Flex盒子里面，还可以在嵌套Flex盒子。配合空间、方向、位置的转换，就构成了我们整个复杂的页面。
效果
常用属性
flex-start从头开始。flex-end从尾开始。flex-center居中。到这里，我们的CSS也结束了，学会了喵，下一篇是JS。