Co je Flexbox?

Flexbox (Flexible Box Layout) je modul CSS navržený pro vytváření složitých a responzivních rozvržení. Umožňuje řídit uspořádání, zarovnání a rozložení prostoru mezi prvky kontejneru, i když jejich velikosti jsou neznámé nebo dynamické.

Hlavní koncepty Flexboxu:

• Hlavní osa (main axis): osa, podél které jsou prvky rozmístěny. Výchozí je horizontální (zleva doprava).
• Křížová osa (cross axis): osa kolmí na hlavní osu. Výchozí je vertikální (shora dolů).
• Kontejner (flex container): prvek, na který se aplikují vlastnosti Flexboxu (display: flex nebo display: inline-flex).
• Prvky (flex items): potomci kontejneru.

Vlastnosti pro flex kontejner:

• display: flex nebo inline-flex
• flex-direction: určuje směr hlavní osy (row, row-reverse, column, column-reverse)
• flex-wrap: určuje, zda se prvky zalomí na novou řádku (nowrap, wrap, wrap-reverse)
• justify-content: zarovnání prvků podél hlavní osy (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: zarovnání prvků podél křížové osy (flex-start, flex-end, center, baseline, stretch)
• align-content: zarovnání řádků nebo sloupců podél křížové osy v víceřádkovém kontejneru (flex-start, flex-end, center, space-between, space-around, stretch)

Vlastnosti pro flex prvky:

• order: určuje pořadí prvku v kontejneru
• flex-grow: určuje, jak moc by měl prvek růst, aby zaplnil dostupný prostor
• flex-shrink: určuje, jak moc by se měl prvek zmenšit, pokud není dost místa
• flex-basis: určuje počáteční velikost prvku před rozdělením prostoru
• flex: zkrácená vlastnost pro flex-grow, flex-shrink a flex-basis
• align-self: přepíše zarovnání prvku podél křížové osy (flex-start, flex-end, center, baseline, stretch, auto)

Příklad použití:

/* Kontejner */
.container {
  display: flex; /* Aktivace Flexboxu */
  flex-direction: row; /* Řádkové uspořádání */
  justify-content: center; /* Horizontální centrování */
  align-items: center; /* Vertikální centrování */
  height: 200px; /* Výška kontejneru */
  border: 1px solid black;
}

/* Prvky */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox výrazně usnadňuje tvorbu responzivních rozvržení ve srovnání s tradičními metodami (float, inline-block, table).