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前面 */
}