CSS3 Flexible Box Model и вложенные макеты

Question

Я немного поигрался с гибкой блочной моделью CSS3, как описано в этой статье: Гибкая блочная модель CSS 3

Я пытаюсь создать простой vbox с вложенным hbox, что-то вроде этого:

<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;
}

Рабочий пример подхода 1 здесь ,основным недостатком этого подхода является то, что вы нарушаете правила CSS по умолчанию, которые могут вызвать путаницу в других местах.

2 Удалите display: block из более конкретных правил:

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

Рабочий пример подхода 2 здесь , основным недостатком этого подхода является то, что вам понадобятся все прямые дочерние элементы .hbox или .vbox для элементов блочного уровня.