个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我的目标是使用 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/
24
4
0
更新 对于那些不喜欢内联 CSS 并想要类的人，这里有另一个带有类和样式表的 jsFiddle。 更新结束 我想做一个产品页面。它将包含三列。第一个是图片，第二个是一些规范，第三个是“入篮”。所有列的
我创建了一个简单的测试应用程序 使用以下代码 var i : int; for (i=0; i *
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
我读过好几遍，要让 flex-grow 按预期工作，您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上，一直向上。 在学习 flexbox 时，这给我的印象是它具有
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗？如果是这样，请建议我要通过的链接.. 但是，使用编辑器将最大限度地减少我们的工作，并自行创建代码。所以作为一个新的学习者，理
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度，只使用 CSS？ JSFiddle:https://jsf
我有一个 flex .swf 和一个单独的 AIR 项目，我试图通过套接字相互通信。 这两个程序连接正常，.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是，我发现当 AIR 应用程序将数据
在这种情况下，我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行，而不是将其放置在 div 下方那已经是那个特定的顺序了。 我如何使用 flexbox - 将包含 2
假设您有一个带有显示 flex、flex-direction 列的 div，在本例中高度为 600。 它有三个子项，每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本，第三个子项呈现 h1
男孩，这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。 今天我们中的许多人都知道 displa
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时，所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
在可访问的 flex 应用程序中，用户可以使用 TAB 键在控件中导航。 在用户激活特定链接后，flex 应用程序会在 html 页面顶部弹出，并使用 swfobject.embedSWF 加载。 它
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。 启动我的应用程序时，我在 Flex 4 中遇到以下错误。 这可能是什么原因？ Error: C
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度，即使红色溢出，它也只占据窗口的 100%。如果我将红色的 display
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ，因为该选项已禁用。 因此，请任何人知道如何
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
我正在尝试理解以下行。 flex :0 1 50% 现在，如果最后一个值，flex basis 是像素，上面会说该元素不允许增长，但允许缩小并且最大为 50 像素。 但是用百分比代替，有什么关系。它将
我一直致力于 flex 布局，遇到了针对 Firefox 和 IE11 的问题。 我创建了一个 codepen显示问题。 截图 Chrome(左)、Firefox(右) 描述 预期的行为是header
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如，表单项是标准的“客户”字段，例如名字、姓氏、地址、城市、州、 z
我是一名优秀的程序员,十分优秀！