Flexbox

Flexbox primárně slouží k lepší a jednodušší správě rozložení prvků uvnitř boxu. V tomto článku se podíváme na jednotlivé vlastnosti, co vše nám flex nabízí.

vladce tyran | | css

Flexbox Layout oficiálně nazvaný CSS Flexible Box Layout Module je nový modul rozvržení v CSS3, jehož cílem je vylepšit zarovnání, nasměrování a pořadí položek v kontejneru, i když mají dynamickou nebo dokonce neznámou velikost.

 

Flexbox se zkládá z Nadřazeného kontejnéru a jeho bezprostředně následujících položek - flex položek (itemy).

Flexbox může zabírat celou šířku nebo stejně jako u inline-block jen tolik kolik potřebuje.

.flex-container {
  display: flex; /* celá šířka */
  display: inline-flex; /* jen tolik kolik zabírají její položky */
}

 

Směr položek

Směr položek můžeme určovat vlastností flex-direction, její hodnoty mohou být:

  • row - výchozí hodnota, položky jsou vodorovně z leva do prava
  • row-reverse - vodorovně, ale z prava do leva
  • column - po ose y, z hora dolů
  • column-reverse - po ose y, ale naopak z dola nahoru

flex-direction rowflex-direction row-reverseflex-direction columnflex-direction column-reverse

 

Zalamování položek

Koncept flexboxu je ten že všechny itemy budou v jednom řádku (v případě že se do jednoho nevejdou mohou se zmenšit, ale i to lze ovlivnit). Vlastnost flex-wrap řídí to zda se budou nowrap nebo nebudou položky zalamovat wrap, popřípadě zda se budou zalomavoat odd zdola nahoru z leva doprava wrap-reverse.

.flex-container {
  flex-wrap: nowrap; /* položky se nezalomí */
  flex-wrap: wrap; /* položky se mohou zalomit na další řádek */
  flex-wrap: wrap-reverse; /* položky se zalomí, 1. budou dole, poslední nahoře*/
}

 

Zarovnání položek dle hlavní osy

Zarovnávat položky dle hlavní osy lze vlastností justify-content. To zda bude hlavní osa x nebo y určuje vlastnost flex-direction (viz. nahoře).

Hodnoty jsou:

  • flex-start - položky začnou na začátku. Výchozí hodnota
  • flex-end - od konce
  • center - na střed
  • space-between - mezi položkami bude přerozdělena mezera ze zbytkového místa
  • space-around - mezera ze zbytkového místa bude kolem každé položky, tedy narozdíl od space-between i mezi první a poslední položkou.

 

Zarovnání v příčné ose

V příčné ose lze zarovnávat flex položky pomocí vlastnosti align-items. Hodnoty jsou:

  • stretch - výchozí hodnota, položky budou na celou výšku
  • flex-start - položky začnou na začátku
  • flex-end - položky začnou od konce
  • center - položky jsou zarovnány na střed
  • baseline - položky jsou zarovnány podle hlavní linie

 

Zarovnání v řádku

Vlastnost align-content zarovná řádky v kontejneru flex, když je v příčné ose další prostor. Platí pouze v případě, že existuje více než jeden řádek položek.

Hodnoty jsou:

  • stretch - po celé ose
  • flex-start - od začátku
  • flex-end - od konce
  • center - na střed
  • space-between - s mezerou mezi položkami
  • space-around - každá položka má mezeru

 

flexbox align content stretchflexbox align content flex startflexbox align content flex endflexbox align content centerflexbox align content space betweenflexbox align content space around

 

Pořadí flex položek

Pořadí položek lze ovlivnit vlastností order. Každá položka má výchozí hodnotu 0. Pokud tedy máte 5 prvků a první prvek by jste chtěli např na třetí místo, musíte přiřadit hodnotu všem prvkům, neboť order: 3 by se zařadilo až na poslední místo.

.flex-containter {
  display: flex;
}

.flex-item {
  order: 3;
}

flex vlastnost order

 

Růst flex položky

Vlastnost flex-grow určuje faktor růstu flex položky v případě že je ve flex containeru místo. Výchozí hodnota je 0.

Např. pokud má container velikost 600px a my máme 3 položky s flex-grow: 1 o výchozí šířce 50px, bude každá položka roztažena o (600 - 50 * 3) / 3 = 150px, tj. každý položka bude mít šířku 150px + 50px = 200px. Volné místo je 450px... 3 položky mají poměr 1, tudíž se každá položka rovnoměrně rozdělá.

flex grow 0

flex-grow

 

Zmenšení flex položky

Zmenšení flex položky řídí vlastnost flex-shrink, kde výchozí hodnota je 0. Je to podobné jako v případě flex-grow akorát opačně. V případě že se položky nevejdou do kontejneru, zmenší se dle poměru.

 

Jiné zarovnání položky

Výchozí zarovnání vlastnosti align-items, umí změnit vlastnost align-self. Tato vlastnost se přiřazuje samotné položce. Hodnoty jsou stejné jako u vlastnosti align-items, tj.: stretch, flex-start, flex-end, center a baseline.

 

Zkratky vlastností

Lze používat i vlastnost, jež zahrnuje více najednou.

 

flex-flow

Tato vlastnost je zkratkou pro nastavení vlastností flex-direction a flex-wrap.

.flex-container {
  flex-flow: row nowrap; /* výchozí hodnota */
}

 

flex-basis

Tato vlastnost přebírá stejné hodnoty jako vlastnosti šířky a výšky a určuje počáteční hlavní velikost položky flexu, než bude volné místo distribuováno podle faktorů flexu.

.flex-item {
  flex-basis: auto; /* výchozí hodnota */
}

 

flex

Tato vlastnost je zkratkou pro vlastnosti flex-grow, flex-shrink a flex-base. Mezi jinými hodnotami lze také nastavit na auto (1 1 auto) a žádné (0 0 auto).

 

Závěr

Flexbox primárně slouží k lepší a jednodušší správě rozložení prvků uvnitř boxu. I když jde s ním jde u jedodušších šablon dělat i layout, nenabízí tak dobrou správu jako grid.

Velikost fontu

12141618