Генератор на 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?
При изключено пренасяне (wrap) всеки елемент се принуждава да остане на един ред и може да бъде силно притиснат. Включете го и елементите, които вече не се събират, ще преминат на следващия ред — тогава се намесва align-content, който разпределя пространството между редовете като група. Gap задава разстоянието между елементите и между редовете, без да изисква маржове.