Jednorozměrný layout systém — řada nebo sloupec. Ideální pro navigaci, karty v řadě, centrování obsahu a distribuci prostoru.
Aktivuje Flexbox. Přímí potomci se stávají flex items a řadí se do řady.
display: flex aktivuje Flexbox na elementu. Přímí potomci (flex items) se automaticky řadí do řady (default). display: inline-flex = flexbox kontejner který se chová jako inline element. Flexbox funguje jen na přímé potomky.
/* Základní flex */
.container { display: flex; }
/* Perfektní centrování */
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Navigace */
.nav {
display: flex;
align-items: center;
gap: 1rem;
}
.nav-right { margin-left: auto; }
/* Karty v řadě */
.cards {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Sidebar + main */
.layout {
display: flex;
gap: 2rem;
}
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }
/* Inline tlačítko */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
row (vodorovně), column (svisle), row-reverse, column-reverse. Mění co je hlavní a křížová osa.
Definuje hlavní osu flexboxu. row = zleva doprava. column = shora dolů. Reverse varianty obrátí pořadí. Zásadní: justify-content pracuje podél hlavní osy, align-items podél křížové — s column se jejich "směry" prohodí.
/* Karta: tlačítko vždy dole */
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-content { flex: 1; }
.card-btn { margin-top: auto; }
/* Chat: nejnovější zprávy dole */
.chat {
display: flex;
flex-direction: column-reverse;
overflow-y: auto;
}
/* Mobilní: svislý layout */
.nav {
flex-direction: column;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
}
}
Distribuuje prostor podél hlavní osy. space-between = nejčastější pro navigaci.
Zarovná flex items podél hlavní osy (row = horizontálně, column = vertikálně). flex-start = u začátku. center = uprostřed. space-between = mezery mezi items (krajní k okraji). space-around = mezery kolem. space-evenly = všechny mezery stejné.
/* Navigace: logo vlevo, menu vpravo */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Centrovat tlačítka */
.btn-group {
display: flex;
justify-content: center;
gap: 1rem;
}
/* Karty rovnoměrně */
.cards {
display: flex;
justify-content: space-evenly;
}
/* Centrovat vertikálně (s column) */
.hero {
display: flex;
flex-direction: column;
justify-content: center; /* svisle */
align-items: center; /* vodorovně */
min-height: 100vh;
}
Zarovná flex items kolmo k hlavní ose. stretch = roztáhne. center = vertikálně centruje (v row).
Zarovná flex items podél křížové osy (kolmá k flex-direction). V row = vertikálně. V column = horizontálně. stretch (default) = roztáhne na výšku kontejneru. baseline = zarovná dle textové základny.
/* Dokonalé centrování */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Navbár s různou výškou items */
.nav {
display: flex;
align-items: center; /* vše na střed */
}
/* Baseline zarovnání pro stats */
.stat {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.stat-number { font-size: 3rem; }
.stat-label { font-size: 0.8rem; }
/* align-self pro jedno dítě */
.cards {
display: flex;
align-items: stretch;
}
.cards .featured {
align-self: flex-start; /* toto je jiné */
}
nowrap = přetečou, wrap = zalomí na nový řádek. wrap + flex-basis = responzivní grid bez media queries.
nowrap (default): všechny items v jedné řadě, i za cenu překryvu nebo přetečení. wrap: zalomí na nový řádek když se items nevejdou. wrap-reverse: zalomí opačně. Kombinace s flex-basis vytvoří responzivní grid bez media queries.
/* ✅ Responzivní grid bez media queries */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 250px;
/* min 250px, může růst i se smrštit */
}
/* Při 800px kontejneru: ~3 sloupce */
/* Při 500px kontejneru: ~2 sloupce */
/* Při 250px kontejneru: 1 sloupec */
/* nowrap: karty v řadě, nepřeskakují */
.features {
display: flex;
flex-wrap: nowrap;
overflow-x: auto; /* scroll místo wrap */
gap: 1rem;
}
/* align-content pro wrap */
.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
/* skupiny řádků začínají nahoře */
}
Nahrazuje margin triky. Mezera JEN mezi items, ne na krajích. Funguje v Flex i Grid.
gap přidá mezeru mezi flex nebo grid items — ne na krajích kontejneru. Před gap: margin: 0 8px na dětech + negativní margin na rodiči. S gap: jedna vlastnost, žádné hacky. gap: row column pro různé mezery v každém směru.
/* Flex s mezerami */
.nav {
display: flex;
gap: 1rem; /* mezera mezi všemi items */
}
/* Různé mezery */
.grid {
display: flex;
flex-wrap: wrap;
gap: 2rem 1rem;
/* row-gap: 2rem; column-gap: 1rem; */
}
/* Jen column gap */
.inline-row {
display: flex;
column-gap: 0.5rem;
}
/* ❌ Starý způsob s margin */
.old-nav a { margin: 0 0.5rem; }
.old-nav a:first-child { margin-left: 0; }
.old-nav a:last-child { margin-right: 0; }
/* ✅ Nový způsob */
.new-nav { display: flex; gap: 1rem; }
Jak item roste, smršťuje a jak velký je výchozí. Shorthand: flex: grow shrink basis.
flex-grow: poměr růstu (0 = neroste). flex-shrink: poměr smrštění (1 = smršťuje, 0 = nesmršťuje). flex-basis: výchozí velikost před distribucí volného prostoru. Shorthand: flex: grow shrink basis.
/* Sidebar + main layout */
.layout { display: flex; gap: 2rem; }
.sidebar { flex: 0 0 240px; } /* pevná */
.main { flex: 1; } /* zbytek */
/* Stejně velké karty */
.cards { display: flex; gap: 1rem; }
.card { flex: 1; } /* všechny stejně */
/* Logo nepružné, nav roste */
.header { display: flex; gap: 1rem; }
.logo { flex-shrink: 0; }
.nav { flex: 1; }
/* Responzivní: min 200px, roste */
.item { flex: 1 1 200px; }
/* flex-grow poměry */
.a { flex-grow: 1; } /* 1 díl */
.b { flex-grow: 2; } /* 2 díly (2× širší) */
.c { flex-grow: 1; } /* 1 díl */
/* 4 díly celkem: 25% / 50% / 25% */
/* Zabránit overflow textu */
.item {
flex: 1;
min-width: 0; /* důležité! */
overflow: hidden;
text-overflow: ellipsis;
}
Mění pořadí bez změny DOM. Default: 0. Záporné = dřív, kladné = pozdějš. Pozor na přístupnost!
order mění vizuální pořadí flex nebo grid items bez změny HTML struktury. Default 0 pro všechny. Záporné číslo = dřív, kladné = pozdějši. Pozor: screen readery čtou originální DOM pořadí, ne vizuální — může způsobit zmatenou navigaci klávesnicí.
/* Přehodit pořadí na mobilu */
@media (max-width: 768px) {
.sidebar { order: 2; } /* dole */
.main { order: 1; } /* nahoře */
}
/* Na desktopu: obnovit normální */
@media (min-width: 768px) {
.sidebar { order: 0; }
.main { order: 0; }
}
/* Featured card jako první */
.card { order: 0; }
.card.featured { order: -1; }
/* Poslední item přesunout na začátek */
.badge { order: -999; }
/* 1. Dokonalé centrování */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 2. Navigace: logo vlevo, nav vpravo */
.navbar {
display: flex;
align-items: center;
gap: 1rem;
}
.navbar .spacer { flex: 1; }
/* nebo: */
.navbar nav { margin-left: auto; }
/* 3. Sidebar + main */
.layout {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.sidebar { flex: 0 0 280px; }
.main { flex: 1; min-width: 0; }
/* 4. Karty se stejnou výškou tlačítka dole */
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card {
flex: 1 1 250px;
display: flex;
flex-direction: column;
}
.card-body { flex: 1; }
.card-btn { margin-top: auto; }
/* 5. Responzivní grid bez media queries */
.auto-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.auto-grid > * { flex: 1 1 200px; }
/* 6. Horizontální scroll (karousel) */
.carousel {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.carousel-item {
flex: 0 0 300px;
scroll-snap-align: start;
}