CSS Flexbox Генератор
Подесите flex контејнер и његове ставке помоћу визуелних контрола, пратите промене уживо и копирајте CSS једним кликом.
Ваш распоред се креира директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo.
Честа питања
Која је разлика између justify-content и align-items?
Својство justify-content распоређује ставке дуж главне осе (правац у којем се пружа ред или колона), док их align-items позиционира дуж попречне осе. Ако промените смер из реда (row) у колону (column), осе мењају места, па тако justify-content почиње да делује одозго надоле, а align-items слева надесно.
Како функционишу контроле за појединачне ставке?
Изаберите ставку према њеном броју, а затим подесите колико се шири (grow) да попуни слободан простор, колико се скупља (shrink) када је простор ограничен, њену почетну величину (basis) и њено сопствено поравнање по попречној оси. Својство order омогућава померање ставке напред или назад на екрану без мењања HTML структуре. Само ставке које заиста измените добиће сопствено правило у генерисаном CSS коду.
Када су важни својства wrap и align-content?
Када је преламање искључено, све ставке су приморане да буду у једном реду и могу се сузити. Када га укључите, ставке које више не могу да стану прелазе у следећи ред — тада на сцену ступа align-content, који контролише размак између тих редова као целине. Својство gap дефинише размак између ставки и редова, без потребе за спољашњим маргинама.