个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我将主容器与 display:flex 和 flex-direction:row 一起使用。我还使用了一些 width:100% 的子元素。
除了 Google pagespeed insights 之外，该页面似乎在所有经过测试的浏览器中都没有问题，而且 AdSense 响应式广告使容器比它必须的更宽。
我不确定这些是否已连接，但我不确定在将某些子元素的宽度设置为 100% 之前是否呈现了 flex 布局。
有人知道这两个 CSS 属性的顺序吗？
我已经创建了一个示例，但似乎我已经遇到了问题
body {
max-width: 1150px;
margin: 0 auto;
}
.header, .footer {
background-color: #eee;
border: 1px dotted #b76507;
padding: 10px 20px 0;
text-align: center;
}
*, :after, :before {
box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
.boxcontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/*width: 100vw;*/
}
.article {
max-width: 832px;
width: 832px;
}
.subcontent1 {
background-color: #eee;
width: 1100px; /* external content */
}
.extra {
background-color: #FFFFFF;
border-left: 1px dotted #b76507;
max-width: 318px;
width: 318px;
display: none;
}
@media all and (min-width: 850px) {
.extra {
display: initial;
}<body>
<header class="header">
header
</header>
<main class="boxcontainer">
<article class="content">
article
<div class="subcontent1">
sub sub sub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub sub sub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub subsub sub
</div>
</article>
<aside class="extra">
sidebarsidebar
</aside>
</main>
<footer class="footer">
footer
</footer>
</body>http://codepen.io/anon/pen/pyBNoX
更新了示例代码以准确显示问题。侧边栏被推到主框之外只是因为内容很宽 - 即使它设置了最大宽度。
最佳答案
我刚刚遇到你的问题，我很乐意尝试为你解答。
通常 flex 会出现在 width 之前，在您想要设置为 100% 的元素上，当您使用 flex 时，请改用 100vh。
这方面的一个例子是:
header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
height: 100vh;
}
我知道这是有效的，因为我直接从我的一个网站的样式表中获取了它。
你可以做些什么来尝试加强它:
header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
如果这回答了您的问题，请告诉我，
詹姆斯。
关于css - 这是 CSS : flex-direction row or width 100%? 中的第一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37203079/
25
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
我是一名优秀的程序员,十分优秀！