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

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

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

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

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

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

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

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

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