Flexbox генератор

.flex-container{

}

.flex-item-{

}

 
1
2
3
4
5
 

Использование Flexbox генератора

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

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