CSS Flexbox генератор

Flexbox распоред има два одвојена правилника — својства на контејнеру (flex-direction, justify-content, align-items, flex-wrap, gap) и својства на сваком детету (flex-grow, flex-shrink, flex-basis) — и њихово мешање је најчешћи извор грешака типа „зашто се ово не центрира / не расте / не прелама онако како очекујем”. Овај генератор ставља оба правилника на екран одједном: промените било коју контролу контејнера или сопствена поља било ког детета и три нумерисана, обојена поља се одмах ажурирају, тако да узрок и последица остају видљиви.

Страна контејнера покрива сваку осу распореда: изаберите смер, изаберите како су деца распоређена дуж главне осе помоћу justify-content, поравнајте их на попречној оси, одлучите да ли се преламају у нове редове и поставите размак уместо маргинских трикова између њих. Дечја страна је исто толико стварна: додајте поља до осам, уклоните до два и дајте било ком од њих сопствени 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.

Као и свака алатка на овом сајту, генератор је бесплатан и ради у потпуности у вашем прегледачу: нема отпремања, нема налога и наставља да ради офлајн када се страница једном учита.