使用 flex 实现 5 种常用布局

原文链接

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 固定在顶部，不会随着页面滚动。

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><!-- 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;
}

使用 flex 实现 5 种常用布局相关推荐

UI(1)---手机界面设计中12种常用布局
手机界面设计中12种常用布局手机界面设计中12种常用布局转载自: 手机界面设计中12种常用布局 - 轩枫阁总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航列表式陈列馆式九宫馆式 ...
Java GUI编程的几种常用布局管理器
Java GUI编程的几种常用布局管理器本人是一个大二的学生.因为最近有做JavaGUI界面的需求,因此重新开始熟悉JavaGUI的各种控件和布局.然后以次博文为笔记,总结.完善以及发表最近学习的一 ...
前端页面的几种常用布局
一 .静态页面布局传统页面布局,网页上的所有元素的尺寸一律使用px作为单位. 静态页面布局通常有几下几种: 1.表格布局 2.层布局 3.div+css样式表布局表格布局: 表格布局容易把握,是最 ...
java swing 布局_java swing的四种常用布局
第三种卡片布局可用于完成简单的抽奖程序,这个还是挺有趣的. 一:流式布局FlowLayout 实现代码: import java.awt.FlowLayout ; import javax.swing ...
移动端h5 顶部菜单栏_手机界面设计中12种常用布局 - 轩枫阁
前言总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航列表式陈列馆式九宫馆式选项卡式旋转木马行为扩展式多面板图表式次导航抽屉式超级菜单式弹出式图片轮盘式其中,所 ...
qt布局嵌套_Qt的5种常用布局搭建
Qt布局详解: 界面开发首先要对整个界面进行布局,使窗体上的所有的控件必须有一个合适的尺寸和位置.那么做出来的界面才看起来美观. 那么如何对界面进行布局呢?Qt提供了一些类负责排列窗体上的控件,主要有 ...
手机界面设计中12种常用布局
总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航列表式陈列馆式九宫馆式选项卡式旋转木马行为扩展式多面板图表式次导航抽屉式超级菜单式弹出式图片轮盘式其中,所有的主 ...
手机端软件界面设计中的几种常用布局
感谢@天天阿木给我们带来的总结.作为一名手机浏览器PM,他从手机界面的设计布局入手,告诉我们如何在APP上展示内容.相信,随着产品设计的迭代更新,还会有更酷的布局出现,让我们一起来看看是哪几种. 手 ...
移动web之四种常用布局
一.流式布局流式布局,就是百分比布局,也称非固定像素布局. 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. div {width : 100% } 二.f ...

使用 flex 实现 5 种常用布局

Sticky Footer

Fixed-Width Sidebar

Sidebar

Sticky Header

Sticky Sidebar

使用 flex 实现 5 种常用布局相关推荐

最新文章

热门文章