Question

我一直在玩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的内容是垂直布局而不是水平布局。我做错了什么以及如何正确地做到这一点？感谢。

Answer 1

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

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的所有直接子项都是块级元素。

CSS3 Flexible Box模型和嵌套布局

1 个答案: