Проблема с попутным ветром css, гибким направлением

Question

Я работаю над сайд-проектом по изучению попутного ветра css, и у меня возникла проблема с отзывчивостью моего направления flexbox.

Из того, что я прочитал, можно сделать тег html отзывчивым, добавив sm: md: lg:, чтобы он использовал соответствующий класс в зависимости от разрешения экрана. Но когда я пробую это с flexbox, это не сработает.

Это часть моего кода: <div class="flex-col md:flex-row h-screen w-screen m-3">.

Как видите, я хочу использовать flex-row на экране больше, чем md:. Но он продолжает использовать flex-col даже когда я превышаю разрешение md:, которое составляет 768 пикселей.

Полный код: https://codesandbox.io/s/pedantic-hoover-lr93g?file= / index. html

Вот как это выглядит, когда я удаляю flex-col и использую только flex: https://imgur.com/a/tUJKPro

Answer 1

Нельзя использовать flex-col или flex-row (и другие классы flex) без одного «flex». Класс «flex» соответствует «display: flex» (без него ваши div - это блоки), а «flex-row» - это «flex-direction: row», которое не будет работать без свойства flex display.

Проверьте документы: https://tailwindcss.com/docs/flex-direction

Поэтому вместо

<div class="flex-col md:flex-row h-screen w-screen m-3">

должно быть

<div class="flex flex-col md:flex-row h-screen w-screen m-3">

Фиксированный код: https://codesandbox.io/s/admiring-framework-lxz8y?file= / index . html

Также измените ширину на меньших устройствах так, как вам нужно.