使用Flex实现5种常用布局

作者:应用开发　来源:系统运维　浏览:　【大 中 小】　发布时间:2025-11-04 14:08:12 评论数:

Sticky Footer

经典的使用实现上-中-下布局。

当页面内容高度小于可视区域高度时，种常footer 吸附在底部；当页面内容高度大于可视区域高度时，用布footer 被撑开排在 content 下方

demo link

<body> <header>HEADER</header> <article>CONTENT</article> <footer>FOOTER</footer> </body> body { min-height: 100vh; display: flex; flex-direction: column; } article { flex: auto; }

Fixed-Width Sidebar

在上-中-下布局的使用实现基础上，加了左侧定宽 sidebar。种常

demo link

<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 article { flex: auto; }

Sidebar

左边是服务器租用用布定宽 sidebar，右边是使用实现上-中-下布局。

demo link

<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 固定在顶部，云南idc服务商不会随着页面滚动。使用实现

demo link

<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 Sidebar

左侧 sidebar 固定在左侧且与视窗同高，种常当内容超出视窗高度时，用布在 sidebar 内部出现滚动条。使用实现左右两侧滚动条互相独立。种常

用布

demo link

用布

用布<body> <aside> ASIDE <p>item</p> <p>item</p>  <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; }