- 会员特权
使用 flex 实现几种常用布局（一）
简介：想必大家都已经很了解 `Flex` 的基本使用方法，今天给大家介绍几种常用的布局实现。
可前往公众号查看原文： 前端面试题宝典，关注公众号，查看最新面经和技术文章哦~
大家好，我是雷布斯。
网页布局是前端面试中很常见的面试方向，传统的布局方案是基于 display + position + float属性，实现一些特殊的布局都会比较麻烦。
W3C 在 2009 年就提出了 Flex 布局，可以简便、完整、响应式地实现各种页面布局，也成为了目前主流的布局方案。
想必大家都已经很了解 Flex 的基本使用方法，今天给大家介绍几种常用的布局实现。
Sticky Footer
首先来看看经典的上-中-下布局。
布局特点：
当页面内容高度小于可视区域高度时，footer 吸附在底部； 当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方
大家有实现思路吗？
其实使用 flex 实现很简单，咱们也不卖关子，直接贴出代码：
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
article {
flex: auto;
}
是不是很简单？
flex: auto;是 flex:1 1 auto; 的简写，有剩余空间就放大，空间不够就缩小。
那么它和 flex: 1; 有什么区别呢，大家可以思考下。
Fixed-Width Sidebar
在上-中-下布局的基础上，加上左侧定宽 sidebar。
我们依旧可以使用 flex: auto实现。
<body>
<header>HEADER</header>
<div class="content">
<aside>ASIDE</aside>
<article>CONTENT</article>
</div>
<footer>FOOTER</footer>
</body>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
.content aside {
width: 100px;
}
.content article {
flex: auto;
}
Sidebar
左边是定宽 sidebar，右边是上-中-下布局。
<body>
<aside>ASIDE</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>
body {
min-height: 100vh;
display: flex;
}
aside {
flex: none;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content article {
flex: auto;
}
Sticky Header
还是 上-中-下 布局，区别是 header 固定在顶部，不会随着页面滚动。
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 60px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
}
article {
flex: auto;
height: 1000px;
}
大家可能还会想到使用 sticky 替换 fixed。
Sticky Sidebar
布局要点：
左侧 sidebar 固定在左侧且与视窗同高 当内容超出视窗高度时，在 sidebar 内部出现滚动条 左右两侧滚动条互相独立
<body>
<aside>
ASIDE
<p>item</p>
<p>item</p>
<!-- many items -->
<p>item</p>
</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>
body {
height: 100vh;
display: flex;
}
aside {
flex: none;
width: 200px;
overflow-y: auto;
display: block;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content article {
flex: auto;
}
最后
篇幅限制，我们的第一篇先介绍到这儿。我们将在下一篇介绍其他的一些布局实现方式，比如如何单独适配最后一行的排列，实现色子5的布局，实现色子3的布局等布局。
还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，我们的题库主打无广告和更新快哦~。
老规矩，也给我们团队的辅导服务打个广告。