Визуелно дизајнирање на CSS Flexbox распореди
Алатката Генератор на Flexbox овозможува визуелно да поставите flex контејнер и неговите елементи. Преку манипулација со контролите во интерфејсот, можете да го дефинирате распоредот, да ги следите промените во живо преку визуелен приказ и потоа да го копирате генерираниот CSS-код за вашиот дизајн.
Оваа алатка е наменета за секој што сака визуелно да дизајнира CSS flexbox распоред, брзо да генерира CSS за контејнер и неговите елементи, или сака подобро да го разбере влијанието на различните flexbox својства врз распоредот. Алатката е исклучително корисна при креирање на вообичаени распореди како што се центриран елемент, навигација, стек од елементи, картички или странична лента.
Контроли за управување со контејнерот
Контејнерот е основата на flexbox распоредот. Во делот Контејнер, корисникот може да ги прилагодува следните својства кои влијаат на целокупното однесување на елементите:
- Насока (flex-direction): Ги дефинира насоките на оските. Опциите вклучуваат Ред (row), Обратен ред (row-reverse), Колона (column) и Обратна колона (column-reverse).
- Пренесување (flex-wrap): Контролира дали елементите ќе останат во една линија или ќе се пренесуваат. Опциите се Без пренесување (nowrap), Пренесување (wrap) и Обратно пренесување (wrap-reverse).
- Порамни по главна оска (justify-content): Го одредува порамнувањето долж главната оска со опциите Почеток (flex-start), Крај (flex-end), Центар (center), Простор помеѓу (space-between), Простор околу (space-around) и Равномерен простор (space-evenly).
- Порамни елементи (align-items): Го дефинира порамнувањето по попречната оска со опциите Почеток (flex-start), Крај (flex-end), Центар (center), Растегни (stretch) и Основна линија (baseline).
- Порамни содржина (align-content): Го контролира просторот меѓу редовите кога има повеќе линии. Опциите се Почеток (flex-start), Крај (flex-end), Центар (center), Растегни (stretch), Простор помеѓу (space-between), Простор околу (space-around) и Равномерен простор (space-evenly).
- Празнина (gap): Овозможува внесување на бројчена вредност која го одредува просторот помеѓу елементите и помеѓу линиите.
Прилагодување на поединечните елементи
Во делот Елементи, можете да управувате со својствата на секој поединечен елемент во контејнерот. Кога ќе се кликне на копчето за додавање елемент, се појавува нов елемент (на пример, „Item 5“). За секој елемент може да се постават следните вредности:
- Редослед (order): Бројчена вредност што го одредува редоследот на прикажување на елементот.
- Растење (flex-grow): Бројчена вредност што дефинира колку елементот ќе се прошири за да го пополни слободниот простор.
- Свивање (flex-shrink): Бројчена вредност што одредува колку елементот ќе се собере кога просторот е ограничен.
- Основа (flex-basis): Бројчена вредност или опцијата Автоматски (auto) која ја дефинира почетната големина на елементот.
- Порамни се себеси (align-self): Овозможува индивидуално порамнување на елементот по попречната оска, независно од контејнерот. Опциите се Автоматски (auto), Почеток (flex-start), Крај (flex-end), Центар (center), Растегни (stretch) и Основна линија (baseline).
Интеракција на оските и пренесувањето во нов ред
Разбирањето на правилата на flexbox е клучно за правилно користење на алатката:
- Промена на оските: Кога ја менувате насоката од ред во колона, главната и попречната оска си ги менуваат местата. Ова директно влијае на тоа како функционираат својствата за порамнување по главната оска и порамнување на елементите.
- Ефектот на пренесување: Доколку пренесувањето е исклучено, сите елементи се принудени да бидат во една линија. Кога пренесувањето е вклучено, елементите што не го собираат во линијата преминуваат во следниот ред. Во овој случај, својството за порамнување на содржината ги распоредува тие редови како една група.
- Растојание: Својството за празнина го дефинира просторот помеѓу самите елементи, како и просторот помеѓу редовите кога елементите се пренесени во нов ред.
Излезни резултати и генерирање на CSS
Алатката нуди два клучни излезни резултати во реално време:
- Визуелен приказ во живо: Инстантна визуелизација на сите промени направени преку контролите врз flexbox распоредот.
- CSS-код: Генериран CSS-код за flex контејнерот и неговите елементи.
Важно правило на алатката е дека сопствени 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 го поставува просторот меѓу елементите и меѓу редовите, без потреба од маргини.