Generátor CSS Flexbox
CSS Flexbox generátor ti umožní nastavit kontejneru flex-direction, justify-content, align-items, flex-wrap, align-content a gap, živě zobrazit až 20 položek a zkopírovat vygenerované CSS.
O tomto nástroji
CSS Flexbox generátor ti umožní nastavit kontejneru flex-direction, justify-content, align-items, flex-wrap, align-content a gap, živě zobrazit až 20 položek a zkopírovat vygenerované CSS.
Jak ho použít
- Vyber směr a zalamování.
- Nastav justify-content a align-items (a align-content pro zalomené řádky).
- Nastav gap a počet položek v náhledu.
- Klikni na Copy CSS a použij pravidla kontejneru.
Dobré vědět
- justify-content zarovnává položky podél hlavní osy; align-items je zarovnává na příčné ose.
- flex-direction: column prohodí osy, takže justify-content pak funguje svisle.
- align-content má efekt, jen když se položky zalomí do více řádků.
- Vlastnost gap funguje ve Flexboxu ve všech současných hlavních prohlížečích.
- Flexbox je jednorozměrný; pro řádky i sloupce zároveň použij CSS Grid.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak vycentruju div pomocí Flexboxu?
Na rodiči nastav display: flex; justify-content: center; align-items: center; — potomek bude vycentrovaný vodorovně i svisle.
Jaký je rozdíl mezi justify-content a align-items?
justify-content rozmísťuje položky podél hlavní osy (výchozí je řádek); align-items je umísťuje podél příčné osy.
Kdy použít Flexbox místo Gridu?
Flexbox použij pro jednorozměrné layouty, jako jsou navigační lišty a řady tlačítek, a Grid pro dvourozměrné layouty stránek.
Proč align-content nic nedělá?
align-content se uplatní, jen když flex-wrap dovolí položkám zalomit se do více než jednoho řádku.