我正在尝试使用Flexbox构建“圣杯”布局。
- 固定标题
- 固定、可折叠、可滚动的左侧导航
- 灵活的内容区域
- 固定、可折叠、可滚动的右侧导航
见下图:
除了位于标题下方的“应用程序”区域的高度外,我已经把所有东西都做好了。现在它是100vh(视口高度的100%),但这包括64像素的标题。
我尝试使用calc(100vh - 64px),但这不适用于flex。
这是我的基本HTML结构:
<main>
<header></header>
<app>
<nav>Left Nav</nav>
<article>Content</article>
<aside>Right Nav</aside>
</app>
</main>
并且支持CSS:
main {
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 0 64px;
display: flex;
}
app {
flex: 1 1 100vh;
display: flex;
}
nav {
flex: 0 0 256px;
order: 0;
}
article {
flex: 1 1 100px;
order: 1;
}
aside {
flex: 0 0 256px;
order: 2;
}
flex
标签用于 Apache Flex。flexbox
标签是指 CSS 弹性布局。 - Brian