一、初识Flex布局
2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。各浏览器支持情况如下图：
Flex布局将成为未来布局的首选方案。
二、Flex的语法
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。其实这里也不尽绝对，当 flex-direction : column 时，主轴会变为竖直方向，交叉轴变为水平方向。而且在这里，与主轴相对应，我觉得将cross axis译为“副轴”更为容易理解，不过这些都是细节。容器的属性
- flex-direction（定义主轴的方向） row(默认值) | column | row-reverse | column-reverse
- flex-wrap（定义是否换行） no-wrap(默认值) | wrap | wrap-reverse
- flex-flow（以上两个属性的简写方式）
- justify-content（项目在主轴的对齐方式） flex-start | flex-end | center | space-between | space-around
- align-items（项目在副轴的对齐方式） flex-start | flex-end | center | baseline | stretch
- align-content（多根轴线时的对齐方式）flex-start | flex-end | center | space-between | stretch
项目的属性
- order（项目在容器中的排列顺序，越小越靠前，默认为0）
- flex-grow（项目的放大比例，默认0）
- flex-shrink（项目的缩小比例，默认1）
- flex-basis（项目在主轴上所占的大小，默认auto，即为项目的原有尺寸）
- flex（2,3,4项的缩写形式，默认为：flex : 0 1 auto。只写一个值时，后两项为各自的默认值。）
- align-self（属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为
auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。）
三、利用Flex实现圣杯布局
<!DOCTYPE html>几点说明：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 4;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/*两个边栏的宽度设为12em*/
flex: 0 0 12em;
}
.HolyGrail-nav {
/*导航放到最左边*/
order: -1;
}
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
.red{background-color: red}
.blue{background-color: blue}
.gray{background-color: gray}
.pink{background-color: pink}
.yellow{background-color: yellow}
</style>
</head>
<body class="HolyGrail">
<header class="red">我是头部空间</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content yellow">主要内容</main>
<nav class="HolyGrail-nav blue">导航区</nav>
<aside class="HolyGrail-ads gray">广告区</aside>
</div>
<footer class="pink">我是尾部空间</footer>
</body>
</html>
- header和footer flex : 1，而.HolyGrail-boyflex:4，这就表示它们的尺寸比例为1:1:4。这样简写后，flex-shrink 和 flex-basis的取值分别是各自的默认值。
- .HolyGrail-content的flex : 1，HolyGrail-nav的flex : 0 0 12em，.HolyGrail-ads的 flex : 0 0 12em。当 flex-grow 和 flex-shrink 的值都为0时，表示该项目不放大、不缩小。
- 当只有一个项目设置 flex : 1，而其它项目没有设置 flex 属性时（即 flex 取默认值），这时其它项目为各自的原始大小，设置了 flex 属性的项目会独自占据剩余空间。
- 当浏览器的宽度小于768px时，.HolyGrail-body 中的项目竖直叠放，这时的主轴和副轴是交换了方向的，不过这里没有体现出来，当有设置容器属性的需求时，注意这一点很重要。