Заставить мои элементы появляться в вертикально выровненных строках

Question

Я пытаюсь скопировать этот сайт: https://t.gyazo.com/teams/leovegas/dcfef17a5c89c99b7b59e88f997e7cfe.mp4

(возможно, придется обновить страницу, чтобы заставить работать GIF)

У меня есть все настройки, которые я хочу использовать flexbox, чтобыразмеры меняются при изменении окна браузера, мне просто нужно, чтобы эти три раздела отображались в трех вертикальных рядах слева направо, когда размер экрана превышает 710 пикселей.

Я попытался использовать flex-direction: row;и flex-direction: столбец;но они не хотят работать!Даже когда я использую выравнивание контента или выравнивание элементов, три раздела разрываются и располагаются странным образом.Я думаю, что это мой код, который мне мешает, но я не могу понять это!

https://repl.it/@GunarsAuskaps/flexbox-mobile-first-starter-1

вот мой код для любого, кто хочет просмотреть его.

Я хочу, чтобы три столбца были расположены слева направо, в своих отдельных столбцах вверх-вниз, равномерно разделены, сжимались и увеличивались при изгибе.

Answer 1

Я только что рассмотрел структуру кода. Там нет проблемы кода. Вам нужно добавить класс clear: both; в элемент main. Я пытался, и это работает.

@media screen and (min-width: 710px) {
  main {
    display: flex;
    flex-direction: row;
    clear: both;
  }
}

Вот решение:

https://codepen.io/ydhiman20/pen/LomeKG