Flexbox generátor
Állítson be egy flex konténert és elemeit vizuális vezérlőkkel, kövesse az elrendezés élő változását, és másolja ki a CSS-t egyetlen kattintással.
Az elrendezés közvetlenül a böngészőjében épül fel. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire.
GYIK
Mi a különbség a justify-content és az align-items között?
A justify-content a főtengely mentén rendezi el az elemeket – amerre a sor vagy oszlop halad –, míg az align-items a kereszttengely mentén pozicionálja őket. Ha az irányt sorról oszlopra változtatja, a két tengely felcserélődik, így a justify-content fentről lefelé, az align-items pedig balról jobbra kezd el működni.
Hogyan működnek az elemenkénti beállítások?
Válasszon ki egy elemet a száma alapján, majd állítsa be, mennyire növekedjen (grow) a szabad hely kitöltéséhez, mennyire zsugorodjon (shrink) szűkös helyen, mi legyen a kiindulási mérete (basis), és hogyan igazodjon a kereszttengelyen. A sorrend (order) gombbal előrébb vagy hátrébb mozgathat egy elemet a képernyőn a HTML módosítása nélkül. Csak a ténylegesen megváltoztatott elemek kapnak saját szabályt a generált CSS-ben.
Mikor számít a wrap és az align-content?
Kikapcsolt tördelés (wrap) esetén minden elem egyetlen sorba kényszerül, és összenyomódhat. Ha bekapcsolja, a helyhiány miatt kiférő elemek a következő sorba kerülnek – ekkor lép működésbe az align-content, amely a sorok csoportját rendezi el. A rés (gap) margók nélkül határozza meg az elemek és a sorok közötti távolságot.