CSS Flex 布局：用 Flex 来实现圣杯布局
Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。
align-content
平时使用 justify-content 属性比较多，用它来表示主轴的对齐方式。align-content 用来处理多个轴线的对齐方式，这说明布局产生换行！
flex-grow
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。
flex
平时很少直接使用 flex-grow、flex-shrink、flex-basis，一般使用的是 flex。flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。auto 表示放大、缩小，none 表示不放大，不缩小。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
查看 demo，通过放大和缩小浏览器大小动态改变 container 长度，当 container 长度不够时，flex-shrink、flex-basis 产生作用，长度足够 flex-grow、flex-basis 产生作用。
align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
实践：用 Flex 来实现圣杯布局
圣杯布局指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航(nav)、主栏(main)、副栏(aside)。一般情况下，这种布局要求:
- header,footer固定高度，nav,aside固定宽度，body,main自适应。
- main 优先加载
用 Flex 来实现圣杯布局，Flex实现圣杯布局效果
DOM 结构
<html>
<head>
<title>Flex 实现圣杯布局</title>
</head>
<body>
<header>
header
</header>
<div class="content">
<main>main</main>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>
footer
</footer>
</body>
</html>CSS
html,
body {
display: flex;
flex-direction: column;
min-height: 600px;
height: 100%;
font-size: 28px;
font-weight: bolder;
}
header,
footer {
height: 150px;
background-color: #666;
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
.content {
flex: 1; /* 高度自适应 */
display: flex;
}
nav,
aside {
background-color: #eb6f43;
flex: 0 1 200px;
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
justify-content: center;
align-items: center;
flex: 1; /* 宽度自适应 */
background-color: #d6d6d6;
}
nav {
order: -1; /* 调整顺序在main前面 */
}