Этот Flexbox генератор позволит вам быстро и без знаний CSS3 написать стили для элемента HTML. Просто выберите нужные значения в полях, посмотрите на демо-блок, как будут вести себя элементы внутри родительского контейнера (flexbox-container) и скопируйте сгенерированный код CSS прямо в свой проект!

Результат:

1 элемент
2 элемент: Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
3 элемент
4 элемент
5 элемент: Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
.flexbox-container {

display: ;

flex-direction: ;

flex-wrap: ;

justify-content: ;

align-items: ;

}

Flexible box — «гибкий блок».

Flexible box даёт контейнеру способность изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов (для адаптации под мобильные устройства)). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.