CSS Flexbox генератор

Flexbox подредбата има два отделни наръчника с правила – свойства върху контейнера (flex-direction, justify-content, align-items, flex-wrap, gap) и свойства върху всеки дъщерен елемент (flex-grow, flex-shrink, flex-basis) – и смесването им е най-честият източник на грешки от типа „защо това не се центрира / не расте / не пренася на нов ред, както очаквам“. Този генератор показва и двата наръчника на екрана едновременно: променете която и да е настройка на контейнера или собствените полета на някой дъщерен елемент и три номерирани, цветно обозначени полета се обновяват незабавно, така че причината и следствието остават видими.

Страната на контейнера покрива всяка ос на подредбата: изберете посока, изберете как дъщерните елементи се разпределят по главната ос с justify-content, подравнете ги по напречната ос, решете дали да пренасят на нови редове и задайте gap вместо хакове с margin помежду им. Страната на дъщерния елемент е също толкова истинска: добавете полета до осем, премахнете до две и задайте на всяко от тях собствени flex-grow, flex-shrink и flex-basis – генераторът извежда CSS правило за дъщерен елемент само когато поне едно от тях се различава от подразбиращото се в браузъра, така че копираният код никога не се пълни с flex-grow: 0 за полета, които не се нуждаят от него.

Предварително зададените страници прескачат директно към подредбите, които хората наистина търсят по име: как да центрирате div (най-задаваният въпрос за CSS подредба, решен с justify-content и align-items, и двете зададени на center), навигационна лента с лого отляво и връзки отдясно, гъвкави колони с еднаква ширина чрез flex-grow и сравнение една до друга на space-between с близките му space-around и space-evenly.

Както всеки инструмент на този сайт, генераторът е безплатен и работи изцяло във вашия браузър: без качване, без профил и продължава да работи офлайн, след като страницата се зареди.