Как написать адаптивный CSS для гибкого направления ⇐ CSS

[Anonymous]

Я пытаюсь написать адаптивный CSS для Flex. Для отзывчивости я использовал строку и столбец с гибким направлением. Но это не работает. Итак, как сделать этот блок div гибким для мобильных устройств и устройств с вкладками.

Для мобильных устройств: блоки Div должны располагаться на один ниже (вертикально).
Для вкладки: Поля Div должны быть похожи (горизонтально) на поля, они должны быть похожи на следующие. линия.

Демо: https://stackblitz.com/edit/flex-box-ex ... ponent.css

.flex-container { дисплей: гибкий; } .flex-child { гибкий: 1; граница: 2 пикселя, сплошная желтая; цвет фона: сине-фиолетовый; ширина: 150 пикселей; высота: 150 пикселей; } /* Для просмотра на планшете */ @media screen and (min-device-width: 768px) и (max-device-width: 1024px) { .flex-контейнер { гибкое направление: строка; } } /* Для мобильного книжного просмотра */ @media screen and (max-device-width: 480px) и (ориентация: книжная) { .flex-контейнер { гибкое направление: столбец; } } /* Для мобильного ландшафтного просмотра */ @media screen and (max-device-width: 640px) и (ориентация: альбомная) { .flex-контейнер { гибкое направление: строка; } } /* Для мобильных телефонов: книжная или альбомная ориентация */ @media screen и (максимальная ширина устройства: 640 пикселей) { .flex-контейнер { гибкое направление: строка; } Гибкий столбец 1 Гибкий столбец 2 Гибкий столбец 3 Гибкий столбец 4 Гибкий столбец 5 Гибкий столбец 6