Визуелно дизајнирање CSS Flexbox распореда
Алат CSS Flexbox Генератор омогућава корисницима да визуелно подесе flex контејнер и његове ставке. Кроз интерактивне контроле, корисник дефинише распоред елемената, прати све промене уживо на екрану кроз визуелни приказ и на крају једноставно копира генерисани CSS код за свој дизајн.
Овај алат је намењен свима који желе визуелно да креирају CSS flexbox распоред, брзо генеришу потребан CSS код за контејнер и ставке, или желе боље да разумеју како различита flexbox својства утичу на изглед елемената. Такође је изузетно користан приликом израде честих шаблона као што су центрирани елементи, навигационе траке, вертикални стекови, картице или бочне траке.
Подешавање својстава flex контејнера
Контејнер је основа сваког flexbox распореда. Унутар секције Контејнер можете управљати следећим својствима која утичу на понашање свих ставки унутар њега:
- Смер (Direction): Одређује правац у којем се ставке ређају. Опције су Ред (Row), Обрнути ред (Row reverse), Колона (Column) и Обрнута колона (Column reverse).
- Преламање (Wrap): Дефинише да ли ставке морају да остану у једном реду или могу да пређу у нови ред. Доступна подешавања су Без преламања, Преломи и Обрнуто преламање.
- Распоред садржаја (Justify content): Контролише поравнање дуж главне осе. Опције укључују Почетак, Крај, Центар, Размак између (Space between), Једнак размак около (Space around) и Потпуно једнак размак (Space evenly).
- Поравнање ставки (Align items): Одређује како се ставке поравнавају дуж попречне осе. Можете одабрати Почетак, Крај, Центар, Растегни или Основна линија (Baseline).
- Поравнање садржаја (Align content): Дефинише размак између редова када постоји више линија унутар контејнера. Опције су Почетак, Крај, Центар, Растегни, Размак између (Space between), Једнак размак около (Space around) и Потпуно једнак размак (Space evenly).
- Размак (Gap): Омогућава унос нумеричке вредности која директно дефинише простор између ставки и између редова.
Контрола и прилагођавање појединачних ставки
Унутар секције Ставке, корисник може управљати својствима сваког појединачног елемента. Кликом на дугме Додај ставку у изгледу се појављује нови елемент (на пример, „Ставка 5“). За сваку ставку могу се дефинисати следећи параметри:
- Редослед (Order): Нумеричка вредност која одређује редослед приказивања ставке у односу на остале.
- Ширење (Grow): Нумеричка вредност која дефинише колико ће се ставка проширити како би заузела преостали слободан простор.
- Скупљање (Shrink): Нумеричка вредност која одређује способност ставке да се смањи када је простор унутар контејнера ограничен.
- Основа (Basis): Почетна величина ставке пре расподеле простора, која може бити нумеричка вредност или Аутоматски.
- Сопствено поравнање (Align self): Омогућава појединачној ставци да прекорачи опште поравнање контејнера дуж попречне осе. Опције су Аутоматски, Почетак, Крај, Центар, Растегни и Основна линија (Baseline).
Важно правило алата је да ће се сопствена CSS правила генерисати искључиво за оне ставке чија су својства експлицитно измењена у односу на подразумеване вредности.
Интеракција између оса и преламања
Разумевање рада flexbox-а заснива се на међусобном односу његових својстава:
- Замена оса: Када промените смер из реда у колону, главна и попречна оса мењају места. То директно утиче на начин на који својства Распоред садржаја (Justify content) и Поравнање ставки (Align items) функционишу и позиционирају елементе.
- Утицај преламања: Када је преламање искључено (Без преламања), све ставке су приморане да буду позициониране у једној линији. Када се укључи опција Преломи, ставке које физички не могу да стану у исти ред аутоматски прелазе у следећи ред. У том случају, својство Поравнање садржаја (Align content) преузима улогу и распоређује те редове као заједничку групу. Својство Размак (Gap) дефинише размак како између самих ставки, тако и између насталих редова.
Генерисање CSS кода и приватност података
Како подешавате контроле, алат уживо приказује визуелни изглед вашег flexbox распореда. Истовремено, у секцији CSS генерише се комплетан и чист CSS код за ваш контејнер и његове ставке. Кликом на дугме Копирај CSS, стање дугмета се мења у „Копирано“, што је знак да је код спреман за убацивање у ваш пројекат.
Што се тиче приватности и обраде података, комплетан распоред се креира директно у вашем веб прегледачу. Ништа што подесите унутар овог алата не шаље се на BroBroGo, нити се било шта од ваших уноса отпрема на сервере.
Често постављана питања (FAQ)
Која је разлика између 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 дефинише размак између ставки и редова, без потребе за спољашњим маргинама.