Размер flex контейнера.

Привет.
Никак не могу разобраться с флексами.
Есть общий контейнер column
В нем есть row
Выставлена мин высота 480px.
И wrap
Внутри два блока
Каждому ставил мин ширину или basis
Но при уменьшении контейнера по ширине, второй блок пропадает.
Т.е. не может перенестись на след колонку.

Если родителю вручную увеличить высоту, все ок.

В чем может быть проблема?

Код через песочницу, пожалуйста.

1 лайк


Про вложенные Flex я ошибся.

Возможно, дело в том, что не указана высота вашего второго блока со слайдером.

Спасибо!
Но появился вопрос.
Получается для врапа обязательно задавать высоту блока?
А можно ли при переносе заставить блок уменьшить высоту?
т.е сохранить пропорции.

Нет, почему? Если высоту вашего блока будет определять высота содержимого, то не надо. А сейчас ваш блок пуст, поэтому вы посчитали, что он “исчезает” при переносе.

С помощью @media можно многое реализовать.

А где можно исчераывающе прочитать о них? Тут все прошел.
Про медиа даже не слышал(

https://webref.ru/course/css-advanced/responsiveness
http://topolyan.com/w3c/css3-mediaqueries-ru.html

Огромное спасибо!
Изучил, примерно понимаю необходимые области применения.
Подскажите. Когда оправдан Flex, а когда лучше @media ?

Медиа точно подойдет для изменения стилей. К примеру спрятать список меню под хайд.
А вот в вопросах адаптивности не понятно совсем.

Flex и @media неплохо сочетаются вместе.
По адаптивности задавайте конкретные вопросы. Слова “совсем непонятно” достаточно общие.

Для адаптивность нужно:
-Сделать размер блоков гибким, без изменения положения и размеров(точнее без тонкой настройки) детей и пропорций.

-ращметка крупных ,средних, маленьких блоков(не одновременно, просто интересно для чего именно лучше использовать).

-создание быстрого, адаптивного сайта(вопрос о скорости выполнения @media и Flex).

У меня совсем мало опыта чтобы такие вопросы грамотно задавать))

Вообще, как мне кажется, @media = обрезанный JS. верно?
т.е. все что можно сделать через запросы, можно сделать через JS , но не наоборот(даже если мы говорим исключительно о мертвой странице(в реалиях HTML5 и CSS3) )

Вопрос про Less.
мне очень понравился его синтаксис и как потом удобно с кодом работать.
Но лучше сейчас его не использовать верно? Дабы не нахватать плохих привычек.

P.S как мне кажется, было бы полезно это все оформить в мини гайд.
Думаю многие новички попробовав FLex, начнут его пихать где можно и нельзя.

На счет JS могу с вами согласиться. По поводу Less сложно сказать наверняка, ведь только вы можете правильно оценить свой уровень и понять, полезен будет less на данном этапе или наоборот вреден.
Вы можете изучить исходный код сайта Академии (верстка на флексах), это и будет мини-гайд по практическому использованию технологии.

ОГОГОГОГО!!!
А я думал что это я флексов понакидал где только можно…
Пока изучил только top header.

Понял так.
Если откинуть красивости, @media,(для ПК) добавляет в топ хедер пару дивов с флексами.
Начинаю понимать недавно прочитанное— делаем моб версию, потом ее на ПК

Сам ТОП флекс, внутри него user и nav тоже флексы.
думаю раз их сюда вставили, значит систему не должны сильно грузить)