gpt4 book ai didi

html - 如何在 flex box 'holy grail' 布局中嵌套内容?

转载 作者:搜寻专家 更新时间:2023-10-31 22:39:44 24 4
gpt4 key购买 nike

我的目标是使用 flex 构建一个基于“ chalice ”的布局。主要内容区域需要有额外的内容。 HolyGrail with nested content in main section

我在将“左上内容、上内容中心、右上内容、中内容和下内容”彼此对齐并填充可用空间时遇到了真正的麻烦。

这是一个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>

最佳答案

有几种方法可以构造这种布局。这只是一个:

  • 您不需要 float ,所以我删除了它们。
  • 您不需要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>

revised codepen

关于html - 如何在 flex box 'holy grail' 布局中嵌套内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39736932/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com