Генератор CSS Flexbox

Экспериментируйте с CSS flexbox визуально — корректируйте каждое свойство контейнера и копируйте сгенерированный CSS.

How to use Flexbox Generator

1. Выберите flex-направление и flex-wrap для контейнера.
2. Настройка оправдательного контента, выравнивающих элементов, выравнивающего контента и разрыва.
3. Используйте пункт «Добавить» и «Удалить» элемент, чтобы установить, сколько ящиков появляется в предварительном просмотре.
4. Скопируйте сгенерированный контейнер CSS и вставьте его в свой проект.

Что такое имя?

FAQ

В чем разница между оправдательным содержанием и согласованными пунктами?

оправдательный контент распределяет предметы по главной оси (направление, задаваемое флекс-направлением), в то время как выравнивающие элементы позиционируют их на перпендикулярной перекрестной оси. Переключение флекс-направления между строкой и столбцом эффективно меняет оси, которые контролирует каждый.

Почему выравнивание контента иногда не имеет видимого эффекта?

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

Related tools

• CSS Grid Generator
• CSS Gradient Generator
• Border Radius Generator
• Box Shadow Generator