Нетривиальная расстановка элементов на flexbox без media-запросов

[Zeben]

Да, помню, как пробовал решить Вашу задачу, будучи уверенным, что это не так сложно, но на втором часу понял, что тут есть какой-то нетривиальный приём, который не сильно известен, но работает.

Решение однозначно не является тривиальным и это решение однозначно не то, что первым придёт в голову.

То, что такое решение есть вообще и то, что оно было найдено — очень круто.

Спасибо за статью, Дмитрий.

[CoolCmd]

решение, конечно, интересное, но с эпитетами вышел небольной перебор :)

озарение
безумно
чудеса
трудно поверить
фантастический факт
тотальный парадокс
очень интересным

[dmitry-lavrik]

Спасибо, учту на будущее. Просто когда нашёлся flex-grow: 0.5 и в целом это решение, то эмоций было много. Вот в статье они тоже вылезли.

[diman2000linda]

Просто респект! Как раз на днях такая задача попалась, тоже вертел туда-сюда, в итоге забил и поставил медиа-запрос. Попробую переделать)

[DKozachenko]

Понравилась статья. Думаю, в определенных ситуациях это даже лучше, чем медиа-запросы. Спасибо, буду использовать.

[pavelgvozdb]

jsfiddle.net/2p8x1dvf

По-моему, в этом примере не хватает переноса элементов меню на следующую строку, для экранов меньше 465px. Для этого достаточно к .menuRow добавить 2 стиля:

flex-wrap: wrap;
justify-content: center;

А вообще, статья очень классная!

[dmitry-lavrik]

Мне кажется, заказчик не согласится на меню, идущее в 2 строки. Надо где-то в районе 580px для телефонов его в кнопку превратить.

То есть, на мой взгляд, в примере с меню мы не можем обойтись полностью без media-запросов. Но данный приём с flex позволяет значительно дольше не переживать по поводу того, что меню соскочит вниз.

[da411d]

Мне кажется, что в flex-grow играет роль не само значение, а отношение к другим. То есть если все будут по 1 или по 2, будет то же самое, разве нет?

[Per_Ardua]

Тоже самое будет ровно до момента переноса элемента на следующую строку. И вот там уже будет отличие между 1 и 0.5

[dmitry-lavrik]

На меленьких экранах любой flex-grow кроме 0.5 не позволит сделать центровку. Когда grow >= 1 элемент съедает всё пространство, и text-align разбросают по краям его контент. У верхнего дефолтный left, у нижнего right проставлен.

[SelenIT3]

В том-то и дело, что нет:

У значений flex между 0 и 1 несколько особенное поведение: когда сумма значений flex в строке меньше 1, они занимают меньше чем 100% свободного пространства.

[profesor08]

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

[alexmixaylov]

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

[Xo4yHaMope]

тоже самое можно сделать с помощью flex-grow:9999:
jsfiddle.net/wh1oesac/1
joren.co/flex-grow-9999-hack

[dmitry-lavrik]

Это не работает. В песочнице отлично видно, что текст заголовока остаётся прижат к левому краю после переноса даты на новую строку.

[hulki]

очень интересное решения)

[SelenIT3]

Мне статья очень понравилась как пример "outside the box thinking" и важности внимания к мелочам: почти неизвестная (я сам узнал о ней впервые) особенность стандарта, упомянутая лишь вскользь в примечании к спецификации, в умелых руках выручает во вполне реальной практической задаче. И в целом приятно видеть такое подробное и наглядное объяснение, как всё работает. Спасибо!

[Get-Web]

Очень интересное и полезное решение. Спасибо.