CSS3 弹性盒子模型和嵌套布局答案

【问题标题】：CSS3 Flexible Box Model and nested layoutsCSS3 弹性盒子模型和嵌套布局
【发布时间】：2011-05-26 19:14:14
【问题描述】：

我一直在使用本文所述的 CSS3 灵活盒子模型：CSS 3 Flexible Box Model

我正在尝试创建一个带有嵌套 hbox 的简单 vbox，如下所示：

<div class="vbox">
    <div>Header</div>
    <div class="hbox">
        <div>Section 1</div>
        <div>Section 2</div>
        <div>Section 3</div>
    </div>
    <div>Footer</div>
</div>

但是 hbox 的内容是垂直而不是水平布局的。我做错了什么以及如何正确做？谢谢。

【问题讨论】：

你用的是什么css？
css 在上面提到的文章中（我不想在这里粘贴整个内容，只是包含文章的链接）

标签： layout css nested

【解决方案1】：

问题是.hbox 规则中的display: box; 声明被.vbox > * 规则中的display: block; 覆盖。你有两个选择：

1 使display: box 覆盖更具体的规则：

.hbox {
    display: -webkit-box !important;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box !important;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box !important;
    box-orient: horizontal;
    box-align: stretch;
}

Approach 1 working example here，这种方法的主要缺点是你弄乱了 CSS 的默认特异性规则，这可能会在其他地方引起混淆。

2 从更具体的规则中删除display: block：

.vbox > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}

Approach 2 working example here，这种方法的主要缺点是您需要 .hbox 或 .vbox 的所有直接子级都是块级元素。

【讨论】：

谢谢罗伯特，现在一切都说得通了。我完全错过了那个 css 中的 display:block。
@IgorB 请记住，当有人对您的一个问题给出了正确答案时，请单击大勾号接受它作为答案。如果您有接受答案的历史，更多人会回答您未来的问题。