Если display: flex стоит на контейнере, а элементы всё равно идут друг под другом или не растягиваются — в 90% случаев дело в одном из трёх мест: свойство применили не к тому элементу, дочерние элементы имеют width: 100% или заданную ширину, которая мешает flex-shrink, либо родитель не имеет заданной высоты/ширины, из-за чего flex-контейнеру не от чего отталкиваться.

Как быстро найти причину

• Откройте DevTools (F12), выделите контейнер и проверьте вкладку Computed — там видно, применился ли display: flex вообще, или его перебивает более специфичный селектор.
• Проверьте, не стоит ли у дочерних элементов float или position: absolute — они выпадают из потока и flex на них не действует.
• Убедитесь, что flex-direction соответствует ожиданию: по умолчанию это row, а не column, из-за чего блоки идут в строку, а не колонкой.
• Если элементы не растягиваются по высоте — проверьте align-items: по умолчанию stretch, но он часто перебивается явным height на дочернем блоке.

Частые ошибки в разметке

Класс с display: flex подключён, но не прогружается сам файл стилей — проверьте порядок подключения CSS и не перекрывает ли его инлайн-стиль в HTML (он всегда сильнее внешнего файла). Ещё одна частая причина — опечатка в названии свойства (dispay, flexx) или использование display: flex внутри медиа-запроса, который не срабатывает на нужном разрешении экрана.

Если вёрстка ломается только в старых браузерах — добавьте вендорные префиксы (-webkit-box, -ms-flexbox) или проверьте актуальность полифила autoprefixer в сборке проекта.

Что делать, если правки не помогают

Создайте минимальный тестовый пример — один div с display: flex и двумя дочерними блоками без лишних классов. Если там всё работает, проблему нужно искать в конкретных стилях страницы: отключайте подключённые CSS-файлы по одному через DevTools, пока баг не исчезнет, и ищите конфликтующее правило уже в найденном файле.