Generátor Flexboxu
Nastavte flex kontajner a jeho položky pomocou vizuálnych prvkov, sledujte zmeny v reálnom čase a skopírujte CSS jedným kliknutím.
Vaše rozloženie sa vytvára priamo vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo.
Časté otázky
Aký je rozdiel medzi justify-content a align-items?
Justify-content rozmiestňuje položky pozdĺž hlavnej osi – smeru, ktorým plynie riadok alebo stĺpec – zatiaľ čo align-items ich umiestňuje naprieč druhou osou. Ak zmeníte smer z riadku na stĺpec, tieto dve osi sa prehodia, takže justify-content začne fungovať zhora nadol a align-items zľava doprava.
Ako fungujú ovládacie prvky pre jednotlivé položky?
Vyberte položku podľa jej čísla a potom nastavte, ako veľmi má rásť (grow) na vyplnenie voľného miesta, ako veľmi sa má zmenšiť (shrink) pri nedostatku miesta, jej počiatočnú veľkosť (basis) a jej vlastné zarovnanie na vedľajšej osi. Vlastnosť Order presunie položku skôr alebo neskôr na obrazovke bez zásahu do HTML. Iba položky, ktoré skutočne zmeníte, dostanú svoje vlastné pravidlo v CSS.
Kedy záleží na vlastnostiach wrap a align-content?
Pri vypnutom zalamovaní sú všetky položky tlačené do jedného riadku a môžu sa zúžiť. Po zapnutí zalamovania sa položky, ktoré sa už nezmestia, presunú do ďalšieho riadku – vtedy prichádza na rad align-content, ktorý určuje rozostupy medzi riadkami ako skupinou. Vlastnosť Gap nastavuje priestor medzi položkami a medzi riadkami bez nutnosti použiť margin.