作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我的目标是使用 flex 构建一个基于“ chalice ”的布局。主要内容区域需要有额外的内容。
我在将“左上内容、上内容中心、右上内容、中内容和下内容”彼此对齐并填充可用空间时遇到了真正的麻烦。
这是一个codepen我修改以尝试嵌套内容。
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
flex 容器中。
前三项的宽度为 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>
关于html - 如何在 flex box 'holy grail' 布局中嵌套内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39736932/
我是一名优秀的程序员,十分优秀!