Порядок следования отдельно взятого flex-блока внутри flex-контейнера

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order. Оно задается целым числом и по умолчанию равно 0.

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

<div class="my-flex-container">

<div class="my-flex-block" style="order: 5" >item1</div>

<div class="my-flex-block" style="order: 10">item2</div>

<div class="my-flex-block" style="order: 5" >item3</div>

<div class="my-flex-block" style="order: 5" >item4</div>

<div class="my-flex-block" style="order: 0" >item5</div>

</div>

Пример

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

.my-flex-container {

display: flex;

height: 300px; /* Или что угодно */

}

.my-flex-block {

width: 100px; /* Или что угодно */

height: 100px; /* Или что угодно */

margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */

}

Вещи, которые следует помнить

● Не следует использовать flexbox там, где в этом нет необходимости.

● Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.

● Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.

● Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.

● Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.

● flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580