Почти полное руководство по flexbox (без самих flexbox)

Статья, как по мне, прекрасна. Я не думаю, что автор хотел, чтоб все восприняли ее как руководство к действию, хоть и рьяно отстаивает свои позиции. Но эта статья для многих откроет мир, где «не flexом единым». Потому, что как показывает практика, новички, да и не только, хватаются за супер популярные технологии, и кода эти техологии подводят, например в древнем браузере, говорят «это нереально, я испробывал все!». А автор показывает мир, где криво, но живут без flex. Спасибо ему! :)

А мне понравилось, как сделал The Guardian.
Принцип Cut The Mustard

Грубо говоря, чем делать костыли, они делают 2 версии сайта, для старых браузеров и для новых. И применяют progressive enhancement.

В итоге, клиенты со старыми браузерами, коих мало, видят контент, но без плюшек.

Проблема использовать flexbox или нет решается для каждого проекта отдельно, потому что аудитории разные, но при использовании flexbox вы не сломаете сайт, просто человек зашедший на него увидит съехавшие один под другой блоки (и он к этому уже привык, в IE7 весь интернет выглядит поехавшим), а если сделать так:

*display: inline; //если хотите еще и трупы IE 6-7 помучать
display: inline-block;
display: flexbox

То разница будет минимальна.
Я для себя решил использовать flexbox с полифилом для старых IE, НО только тех местах где верстка без него усложнилась бы в разы

Отображать элементы в обратном порядке еще вот так можно было:

.container {
transform: rotate(180deg);
}

.item {
transform: rotate(-180deg);
}

Большинство методов из статьи только на упрощенных примерах выглядят хорошо и «работающе». В реальности же, внутри айтемов может быть такое ужасающее количество контента, и между самими айтемами могут быть отношения, которые сделают ваши сниппеты полностью неприменимы.

Не говоря о том, что 70% сниппетов надо делать респонсив с помощью танцов с бубном, не иначе :-).

В то время как флексбокс всё сам делает замечательно и прекрасно.

Ну а хаки вроде `direction: rtl` никакой уважающий себя ревьюер не пустит в продакшен :-).

По поводу 2016 и флексбокса. Около 4ех проектов уже вывел в продакшен на голом флексбоксе, IE11 и все адекватные браузеры для десктопа и мобильных устройств сапортят флексбокс почти из коробки. У IE11 бывают какие-то баги, но очень легко фиксятся.

Ваши сниппеты потребуют такой кучи хаков внутри приложения, что за месяц сапорта приложения вы просто умрете их всех поддерживать и забьете на него :).

А так статья полезная для проектов «сдал и забыл». Можно хоть абсолют позишенем и калькуляцией на JS центрировать контент для таких проектов :), а порядок менять через jQuery's

.insertAfter()

Для долгоживущих ваши сниппеты просто недопустимы как альтернатива флексбоксу :-)

Во-первых, спасибо Максиму за ПЕРЕВОД этого занятного (хоть и малость провокационного, не спорю:) материала! Какими бы замечательными ни были флексбоксы, даже они — не стопроцентная панацея. Редко, но встречаются задачи, в которых флексбоксы явно проигрывают другим решениям (порой незаслуженно забытым). Один такой пример — вертикальное центрирование текста в «ячейках» равной высоты (http://css-live.ru/articles-css/flexbox-vs-css-table-vertical-centering-inlines.html). Да, и display:inline-block, и display:table-* — не эквивалент флексбоксам и не замена им. Да, они другие. С другими принципами и другими ограничениями. Но именно знание РАЗНЫХ подходов помогает найти оптимальное решение для конкретного случая. Тогда как подход «зачем учить старьё, когда есть крутые и современные [подставить наиболее раскрученное на момент обсуждения название технологии]» именно в этом конкретном случае как раз приведет к необходимости костылей (напр. дополнительной разметки). Статья Кенана, которую перевел Максим, ценна именно напоминанием о самом существовании этих разных подходов.

Во-вторых, комментарии очень показательны. Громкость возмущения а-ля «фу, бяка, костыли» четко коррелирует с адресацией этого возмущения переводчику — т.е. с тем, что люди «ниасилили» аж два указания (в начале и в конце!) на то, что это перевод:). Что уж говорить о каких-то там спецификациях…

Конечно, практическое использование примеров из статьи Кенана — даже если рассматривать их в качестве фоллбэков — требует множества оговорок (напр. нельзя просто взять и добавить флекс-элементам display:table-cell ради фоллбэка, потому что тогда в Firefox, в котором флексбоксы работают по предыдущей версии спецификации, флекс-элементами станут не они, а их анонимная таблица-обертка). Но это — не повод забывать о том, что в CSS есть много разных инструментов, и далеко не всегда самый модный окажется оптимальным в каждой конкретной задаче.

Всем советую поиграть в flexboxfroggy.com, имхо лучший способ понять флексбокс.

Занятно… Спасибо.

А как без flexbox поменять порядок элементов (свойство order), как в последнем примере из css-tricks.com/snippets/css/a-guide-to-flexbox?