Вопрос по html, css, css3, flexbox – Контроль порядка вертикально сложенных элементов с использованием только CSS Flexbox

1

Я пытаюсь использоватьМодуль CSS Flexible Box Layout контролировать порядок отображения элементов. Вот пример HTML (ииграть на скрипке):

<div id='outer-container'>

    <div id='blue-objects' class='object-container'>
        <p>In here we have a number of blue things.</p>
        <p>The amount of content could be very small, or very large.</p>
    </div>

    <div id='green-objects' class='object-container'>
        <p>This is very similar to the blue objects block, in that the amount of content is unknown at design-time, and it could be very small or very large.</p>
        <p>It could be a complicated, nested set of child objects, although in this example there is nothing more than two &lt;p&gt; elements.</p>
    </div>
</div>

/* Started with a columnar layout as given by the Flexplorer: http://bennettfeely.com/flexplorer/ */
.outer-container {    
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;

}

.object-container {
    -webkit-flex: 1 auto;
    flex: 1 auto;
    border: 1px dotted black;
    padding: 0 10px;
    margin: 10px;
}

#blue-objects {
    order: 2;
    font-weight: bold;
}

#green-objects {
    order: 1;
    font-style: italic;
}

Моя цель - использовать чистый CSS для управления порядком появления элементов # blue-objects и # green-objects. Все, что мне удалось сделать, это контролировать горизонтальный порядок сортировки.

Спецификация описываетorder имуществоследующее:

Контейнер flex размещает свое содержимое в порядке документа с измененным порядком, начиная с порядковой группы с наименьшим номером и повышаясь.

Я бы подумал, что это будет означать, что # зеленые объекты будут появляться до # синих объектов, из-заorder значения 1 и 2 соответственно ... но этоне работает в Chrome 36, Firefox 31 или IE 11.

Согласно caniuse.com, flexbox имеет хорошую поддержку в современных браузерах.Что я делаю неправильно? Как я могу контролировать порядок вертикально сложенного набора элементов с помощью модуля CSS Flexible Box Layout? Помощь с этой скрипкой будет принята с благодарностью.

Я думаю, что этот вопрос должен быть удален, но когда я нажимаю «удалить», он предупреждает меня, что удаление вопроса с ответом может привести к бану. Josh
Кстати, если есть другой способ управления порядком отображения, кроме CSS Flexbox, у меня все на слух. Но я думаю, что это единственный способ сделать это в CSS, кроме использования абсолютного позиционирования (что не сработает в моем случае, потому что я не знаю размеров элементов во время разработки). Josh
Вау, это слишком неловко для слов :-( Josh

Ваш Ответ

1   ответ
3

Вам следует позвонить#outer-container и не.outer-container в файле CSS. Тогда будет запущена гибкая модель.

Чтобы поместить только синие объекты в последнюю очередь, просто примените:order:1; для него и ничего для другихDEMO

Значение по умолчанию для заказа равно 0.

Похожие вопросы