Generátor Flexboxu
Nastavte flex kontejner a jeho položky pomocí vizuálních prvků, sledujte změny v reálném čase a zkopírujte CSS jedním kliknutím.
Váš layout se sestavuje přímo ve vašem prohlížeči. Nic z toho, co zde nastavíte, se neodesílá na servery BroBroGo.
Časté dotazy
Jaký je rozdíl mezi justify-content a align-items?
Vlastnost justify-content rozmísťuje položky podél hlavní osy – tedy ve směru, kterým teče řádek nebo sloupec – zatímco align-items je umisťuje napříč druhou osou. Přepněte směr z řádku (row) na sloupec (column) a obě osy se prohodí, takže justify-content začne fungovat shora dolů a align-items zleva doprava.
Jak funguje nastavení pro jednotlivé položky?
Vyberte položku podle jejího čísla a poté nastavte, jak moc se má zvětšit (grow) pro vyplnění volného místa, jak moc se má zmenšit (shrink) při nedostatku místa, její výchozí velikost (basis) a její vlastní zarovnání na příčné ose. Vlastnost order přesune položku na obrazovce dříve nebo později bez zásahu do HTML. Pouze položky, které skutečně změníte, získají v CSS vlastní pravidlo.
Kdy hrají roli vlastnosti wrap a align-content?
Při vypnutém zalamování (wrap) jsou všechny položky nuceny zůstat na jednom řádku a mohou se stlačit. Zapněte jej a položky, které se již nevejdou, se přesunou na další řádek – v tu chvíli přebírá roli align-content, která rozmísťuje řádky jako celek. Vlastnost gap nastavuje prostor mezi položkami a mezi řádky bez nutnosti používat vnější okraje (margin).