1、垂直居中
垂直居中一度是前端面试时必问知识点。
目前的垂直解决方案 使用了 从负外边距 到 display:table-cell 等荒谬的奇技淫巧，包括全高的伪元素。这些方法是又复杂又难写。
不知道大家第一次使用flex布局做什么，反正我是用来做垂直居中，使用它实在是太简单了，两行代码搞定。
<div class="main">
<h2>我居中啦！</h2>
<p>这个元素水平垂直居中了。</p>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
}
.main {
width: 300px;
height: 200px;
}
完整代码请看在线demo
2、sticky footer布局
业务场景：
当页面内容少时，让页脚粘在底部；当内容超过一屏时，页脚跟在后面。
这一度也是一个CSS布局难题。但flex布局可以完美解决这个问题。
HTML结构
<div class="container">
<header>header</header>
<main>
<div class="content">
今夜我不会遇见你 </br>
今夜我遇见了世上的一切</br>
但不会遇见你。
</div>
</main>
<footer>footer</footer>
</div>
CSS
.container {
display: flex;
flex-derection: column;
}
header, footer{
height: 100px;
}
头部和尾部定高，中间内容设置高度后，当内容少时，页脚会在上面，不会固定在底部。
这种效果显然不是我们期望的，要想实现业务要求，就需要使用到flex-grow属性，它的默认值是0。即当有空余空间时，也不放大。这时我们需要将中间main设置flex-grow为1，这样当有空余空间，他就会放大，填充剩余空间。
main {
flex-grow: 1;
}
内容少时-吸附在底部：
内容多时-跟随滚动：
这样我们就实现了这个经典布局了。
完整代码请看在线demo
3、圣杯布局
这是一个经典的 CSS 布局挑战，历史上出现的方案都没有完美解决。直到 Flexbox 布局的出现，终于成为可能。
圣杯布局由页头 (header)，中间部分 (center)，页脚 (footer)，和三栏组成。中间的一栏是主要内容，左边和右边提供如广告、导航的链接。
HTML结构
<div class="HolyGrail">
<header>header</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">content</main>
<nav class="HolyGrail-nav">nav</nav>
<aside class="HolyGrail-ads">ads</aside>
</div>
<footer>footer</footer>
</div>
CSS
.HolyGrail {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header,footer {
height: 100px;
}
.HolyGrail-body {
flex: 1;
display: flex;
justify-content: space-between;
}
.HolyGrail-nav, .HolyGrail-ads {
flex: 0 0 100px;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav {
/* 导航放置最左边 */
order: -1;
}
小屏幕时，中间内容自动成垂直布局，三列。
/* 响应式 */
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
}
.HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content {
flex: 1;
}
}
完整代码请看在线demo
4、经典导航栏布局
HTML结构
<header>
<div class="header-left">
<div class="logo"></div>
<nav>
<a>首页</a>
<a>档案</a>
</nav>
</div>
<div class="header-right">
<div class="user">echo</div>
<div class="logout">退出</div>
</div>
</header>
CSS
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left,.header-right {
display: flex;
align-items: center;
}
.logo {
flex: 0 0 32px;
}
.user {
margin-right: 20px;
}
完整代码请看在线demo
5、栅格布局
基础栅格布局
最简单的网格布局就是平均分布。在容器中平均分配空间，需要设置项目的自动缩放。
核心代码
<div class="grid">
<div class="cell"></div>
...
</div>
.grid {
display: flex;
}
.cell {
flex: 1;
}
完整代码请看在线demo
独立尺寸布局
当你的需求不是等宽栅格的时候，可以添加尺寸属性到特定的栅格中。没有尺寸属性的栅格将简单地继续平分剩下的可用空间。
下边加了 “auto” 标签的栅格没有指定任何尺寸属性。
核心代码
<div class="grid">
<div class="cell u-1of2"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
.u-1of2 {
flex: 0 0 50%;
}
.u-1of3 {
flex: 0 0 33.33%;
}
.u-1of4 {
flex: 0 0 25%;
}
完整代码请看在线demo
6、悬挂式布局
这种布局很普遍，当我们在做一个新闻列表模块时，通常它每一栏的的左侧或右侧，需要展示一个图片栏。
HTML结构
<div class="list">
<div class="item">
<div class="img"></div>
<div class="info"></div>
</div>
<div class="item">
<div class="img"></div>
<div class="info"></div>
</div>
</div>
CSS
.list {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
display: flex;
gap: 10px;
}
.item:nth-of-type(2n) {
flex-direction: row-reverse;
}
.img {
width: 32px;
height: 32px;
}
.info {
flex: 1;
}
完整代码请看在线demo
7、输入框附加布局
我们常常需要在输入框的前方添加提示，后方添加按钮。
核心代码
<!-- 后置 -->
<div class="InputAddOn next">
<input class="InputAddOn-field" />
<span class="InputAddOn-item">搜索</span>
</div>
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex: 1;
}
.InputAddOn-item {
flex: 0 0 60px;
}
完整代码请看在线demo
结语
以上介绍的7种布局基本覆盖了大部分业务场景下的页面布局。或有不足之处，欢迎大家补充讨论。
关于flex布局的其他文章：
参考文章：
