html - Flexbox,嵌套网格/子
问题描述
期望的输出
我正在尝试实现嵌套的 Flexbox 布局。
我希望第二列和第三列的孩子在父母身上采取全尺寸。
它在第一列的 depth = 1 时有效,但在我添加 Flex 容器时失败。
我对错误的看法
我被迫组合flex: 1
并display: flex
使用相同的类,无论它是用作容器还是项目。
任何想法 ?
实际代码
.grid-stretch {
display: flex;
align-items: stretch;
background-color: yellow; /* to track errors */
}
.child-centered {
display: flex;
align-items: center;
justify-content: center;
background-color: green; /* to track errors */
}
html,
body {
height: 100%;
}
body {
margin: 0;
overflow-wrap: break-work;
}
.root {
max-width: 1200px;
height: 100%;
}
header {
min-height: 80px;
/* set a solid border inside the header and not on its edge */
box-sizing: border-box;
border-bottom: 3px solid black;
}
/* depth 1 */
header nav:nth-child(1) {
flex: 3;
background-color: blue;
}
header nav:nth-child(2) {
flex: 5;
background-color: white;
}
header nav:nth-child(3) {
flex: 2;
background-color: red;
}
/* depth 2 */
header nav:nth-child(2) div {
background-color: orange;
}
header nav:nth-child(3) div div {
background-color: orange;
}
<!DOCTYPE html>
<html>
<body>
<div class='root'>
<header class='grid-stretch'>
<nav class='child-centered'>
<a>link</a>
</nav>
<nav class='child-centered'>
<div class='grid-stretch'>
<div class='child-centered'>
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>
</nav>
<nav class='child-centered'>
<div class='grid-stretch'>
<div class='child-centered'>
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>
</nav>
</header>
</div>
</body>
</html>
解决方案
更新您的代码,如下所示:
.grid-stretch {
display: flex;
align-items: stretch;
background-color: yellow; /* to track errors */
}
.child-centered {
display: flex;
align-items: center;
justify-content: center;
text-align:center;
background-color: green; /* to track errors */
}
/* added */
.flex {
display: flex;
}
.flex *{
flex-grow:1;
}
/**/
html,
body {
height: 100%;
}
body {
margin: 0;
overflow-wrap: break-work;
}
.root {
max-width: 1200px;
height: 100%;
}
header {
min-height: 80px;
/* set a solid border inside the header and not on its edge */
box-sizing: border-box;
border-bottom: 3px solid black;
}
/* depth 1 */
header nav:nth-child(1) {
flex: 3;
background-color: blue;
}
header nav:nth-child(2) {
flex: 5;
background-color: white;
}
header nav:nth-child(3) {
flex: 2;
background-color: red;
}
/* depth 2 */
header nav:nth-child(2) div {
background-color: orange;
}
header nav:nth-child(3) div div {
background-color: orange;
}
<!DOCTYPE html>
<html>
<body>
<div class='root'>
<header class='grid-stretch'>
<nav class="flex">
<a class="child-centered">link</a>
</nav>
<nav class="flex">
<div class='grid-stretch'>
<div class='child-centered'>
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>
</nav>
<nav class="flex">
<div class='grid-stretch'>
<div class='child-centered'>
<a>link</a>
<a>link</a>
<a>link</a>
</div>
</div>
</nav>
</header>
</div>
</body>
</html>
推荐阅读
- c# - 为什么我的事件处理程序中只有一个被触发?
- c++ - 重载 operator+ 仅适用于类的特定情况
- excel - Excel 不接受任何 IF 语句
- javascript - 打字稿中的抽象内部类
- regex - Bash/Perl 多行正则表达式问题
- javascript - ForEach 循环代码在使用 mongoose 时无法在 Promise 中工作
- google-admin-sdk - 空的使用报告?
- google-cloud-storage - 如何为 Google Cloud Vision 创建自己的存储桶?
- spring - 未生成主键
- jquery - jQuery 工具提示显示选项卡但不显示换行符?