Использование Flexbox генератора
Данный Flexbox генератор предназначен для более полного понимания работы свойств адаптивной верстки для любых устройств. С помощью выпадающих списков можно выбирать свойства, которые тут же будут применены к тестируемым элементам. Над рабочей поверхностью размещены два блока стилей, первый из которых .flex-container предназначен для задания стилизации для всех элементов внутри гибкого блока. Второй блок .flex-item необходим для задания отдельных свойств предназначенных для каждого отдельного элемента. Для того, чтобы выбрать элемент, к которому будут применяться дальнейшие стили, нужно всего лишь указать его номер в самом первом поле блока.
Также для удобства восприятия и понимания свойства flex-direction, были добавлены две оси за границей блока рабочей поверхности. Главная ось обозначена зеленым цветом, а поперечная красным. Данные оси изменяют своё направление при изменении свойства flex-direction, что вызывает соответствующее изменение направления внутренних блоков.