Qurel, вы поменяли ось flex'а с помощью flex-flow: column;, поэтому перенос не нужен, т. к. контент выстраивается в колонку, а не в ряд, как раньше. Иными словами, на мобильном сайдбар у вас уже не переносится, а идёт сразу после контента, что уже говорит о ненужности wrap.
Вообще, из-за wrap в данном случае можно столкнуться с проблемами. Более того, в целом тут даже и flex-то не нужен, но пусть будет на всякий случай.
Посмотрите тут https://stripe.com, как они управляют осью flex'a у контейнеров для колоночного отображения:
body {
display: flex;
flex-direction: column;
/* тут нет flex-wrap вообще, т. е. используется стандартное значение nowrap */
}
Olek1, да и IE11 весьма недурно Flexbox поддерживает.
Сделал дизайн и оболочку (вёрстку без JS-логики и backend) для приложения одного: test.mindvision.video. Полностью работает в IE11: анимации, разметка, кнопки, поля и всё-всё. Не работают только тени под иллюстрациями (они на filter: blur) и одна анимация SVG на последнем шаге, где ввод кода из SMS.
JS — не моё, поэтому логику уже прикручивал другой человек. Там только моя условная панель для «отладки»: можно потыкать, вызвать разные экраны, анимации и панель управления шагами.
В том проекте (интернет-магазин который) я просто использовал grid + не делал всякие свойства, которые необходимы для работы flex в IE11, поэтому grid пришлось переделывать для поддержки IE11 (без gap'ов) и прописывать нужные для IE11 свойства (типа задавать дополнительно height вместо просто min-height и т. п.).
Сергей delphinpro, полностью согласен. Есть ещё одна проблема: часто всё упирается в бюджет. Хотят за сайт отдать 20 тысяч, поэтому на выходе получается говно, что логично.
Я иду на понижение, т. е. адаптивность у меня это media-стили мобильных устройств. Не знаю, уменьшает ли это объём CSS, но это точно удобнее, чем изменение стилей в обратном порядке по типу media media (min-width: 1299px). Для меня, конечно же.
Опять же, всё зависит от проекта. У меня есть проект, в котором идёт как раз на повышение (mobile first), но это изначально ориентированное на телефоны и планшеты web-приложение, которое мы решили использовать и для десктопа.
Olek1, сделал шаблон для московского интернет-магазина сантехники. Около 6 тысяч посетителей в сутки, не так много, конечно. Начальники решили делать без адаптации под IE11 для ускорения процесса, т. к. у них по статистике это лишь ~3%. Мужик, что пилил скрипты, тоже не стал проверять их работоспособность в IE11. Я в целом был против, но я не имел права голоса.
В итоге, через три дня, набралась куча жалоб от пользователей, что они не могут оформить заказ, не нажимаются кнопки, разметка съезжает. Какой-то там хер хотел заказать на несколько миллионов, но не смог. Ну, классика, словом.
Дархан Камалиев, только автоматической равной высоты не получится. Всё равно надо будет либо шаманить с высотой, либо использовать flex, как все белые люди.
flex-flow: column;, поэтому перенос не нужен, т. к. контент выстраивается в колонку, а не в ряд, как раньше. Иными словами, на мобильном сайдбар у вас уже не переносится, а идёт сразу после контента, что уже говорит о ненужности wrap.Вообще, из-за
wrapв данном случае можно столкнуться с проблемами. Более того, в целом тут даже и flex-то не нужен, но пусть будет на всякий случай.Посмотрите тут https://stripe.com, как они управляют осью flex'a у контейнеров для колоночного отображения: