Генератор на 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 го поставува просторот меѓу елементите и меѓу редовите, без потреба од маргини.