如何将内容嵌套在弹性框“圣杯”布局中？
我的目标是使用 Flex 构建一个基于“圣杯”的布局。主要内容区域需要有附加内容。
我在将“上部内容左、上部内容中心、上部内容右、中间内容和下部内容”彼此对齐并填充可用空间时遇到了真正的麻烦。
这是我修改的代码笔，试图嵌套内容。
body {
margin: 0;
}
.page {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
}
.contentMain {
flex: 1;
background: lightblue;
min-width: 10em;
}
.nav,
.ads {
/* 12em is the width of the columns */
flex: 0 0 12em;
}
.nav {
/* put the nav on the left */
order: -1;
background: salmon;
}
.ads {
background: green;
}
header,
footer {
background: #ccc;
padding: 4em 1em;
}
/*Nested Content*/
.ucleft {
background-color: gray;
width: 30%;
float: left;
}
.uccenter {
background-color: red;
width: 30%;
display: inline-block;
}
.ucright {
background-color: lightgray;
width: 30%;
float: right;
}
.middlecontent {
background-color: blue;
width: 100%;
}
.lowercontent {
background-color: orange;
width: 100%;
}<!-- currently not working in IE, don't know why -->
<body class="page">
<header>Header</header>
<div class="content">
<main class="contentMain">
<div class="upperContainer">
<div class="ucleft">UC Left</div>
<div class="uccenter">UC Center</div>
<div class="ucright">UC Right</div>
</div>
<div class="middlecontent">Middle Content</div>
<div class="lowercontent">Lower Content</div>
</main>
<nav class="nav">Nav</nav>
</div>
<footer>Footer</footer>
</body>有多种方法可以构建此布局。这只是其中之一：
- 你不需要浮动，所以我删除了它们。
- 你不需要
display: inline-block。也被移除。 - 你有一个不必要的容器。已删除。
对于这个特定的方法，五个内容项被包装在一个row wrap弹性容器中。
前三项的宽度为 33.33%。其余项目的宽度为 100%。
这意味着前三个项目将占用第一行中的所有空间，迫使最后两个项目创建额外的行。
在 Chrome、Firefox、Edge 和 IE11 中进行了测试。
.page {
display: flex;
height: 100vh;
flex-direction: column;
margin: 0;
}
.content {
display: flex;
flex: 0 0 60vh;
}
.contentMain {
flex: 1;
background: lightblue;
display: flex;
flex-direction: row;
/* default setting; can be omitted */
flex-wrap: wrap;
}
.nav, .ads {
/* 12em is the width of the columns */
flex: 0 0 12em;
}
.nav {
/* put the nav on the left */
order: -1;
background: salmon;
}
.ads {
background: green;
}
header, footer {
flex: 0 0 20vh;
background: #ccc;
}
/*Nested Content*/
.ucleft {
flex: 1 0 33.33%;
background-color: gray;
}
.uccenter {
flex: 1 0 33.33%;
background-color: red;
}
.ucright {
flex: 1 0 33.33%;
background-color: lightgray;
}
.middlecontent {
flex: 0 0 100%;
background-color: blue;
}
.lowercontent {
flex: 0 0 100%;
background-color: orange;
}<body class="page">
<header>Header</header>
<div class="content">
<main class="contentMain">
<div class="ucleft">UC Left</div>
<div class="uccenter">UC Center</div>
<div class="ucright">UC Right</div>
<div class="middlecontent">Middle Content</div>
<div class="lowercontent">Lower Content</div>
</main>
<nav class="nav">Nav</nav>
</div>
<footer>Footer</footer>
</body>