Несколько способов использовать CSS Flexbox для создания адаптивных макетов:

1. Настроить направление осей. 1 Это можно сделать с помощью свойства flex-direction, которое управляет порядком и направлением расположения flex-элементов. 1 Например, чтобы создать двухколонный макет для большинства размеров экрана и одноколонный для небольших (телефонов и планшетов), нужно изменить flex-direction с row на column в определённой точке останова (800 пикселей в примере). 45
2. Изменить процентное соотношение свойства flex элементов. 45 Это позволяет создавать разные макеты для разных размеров экрана. 5 Например, чтобы создать макет в две колонки для большинства размеров экрана и макет в одну колонку для экранов небольших размеров, нужно изменить процентное соотношение свойства flex элементов в определённой точке останова (800 пикселей в примере). 5
3. Использовать свойство flex-wrap. 23 Оно позволяет переносить элементы на следующую строку, если они превышают ширину контейнера. 23

При использовании Flexbox важно начинать с хорошо структурированного HTML-документа, не злоупотреблять инструментом, делать код простым и тестировать макет на разных устройствах и размерах экрана. 3