Skip to Content

Flexbox

Tento modul je speciálně určený pro rozvržení layoutu na webové stránce. V dnešní pokročilé době internetu je občas obtížné zpracovat složité layouty, které už neobsahují jen pár řádků textu a obrázky, ale skládají se z řady různých modulů poházených po stránce. Další potíže vznikají s nutností přizpůsobit jejich rozložení na obrazovkách rozličných zařízení. Responzivní design už je v této době na obsáhlých webech skoro nevyhnutelný. Do příchodu CSS 3 bylo všechno velmi obtížné, například vertikálně či horizontálně zarovnat obsah či naskládání blokových prvků pěkně vedle sebe byl neradostný a složitý úkol. Bez různých clearů, floatů a někdy bohužel i složitých hacků se taková věc prostě neobešla.
CSS 3 však přišlo s novou vlastností display: flex. Jedná se o nový loyautovací modul Flexbox.
Jednoduchým příkazem můžeme přehodit elementy, aby například nebyly vedle sebe, ale pod sebou a naopak. Flexbox pracuje s konceptem dvou os – hlavní (main) a příčnou (cross).

responzivní design

Elementy můžeme zarovnávat po obou osách. Hlavním důležitým postupem je označit si (v CSS), co bude tzv. Flex container, což může být například body.

HTML
<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen,print" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

<article>Blok 1</article>
<article>Blok 2</article>
<article>Blok 3</article>

</body>
</html>

CSS
html, body {
 height: 100%;
}
body {
 text-align: center;
 background-color: #FFFFFF;
 padding: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 padding: 50px;

 display: flex;
 align-items: center;
 justify-content: center;

}
article {
 background: orange;
 padding: 10px;
 margin: 10px;
}
article:first-child {
 background: red;
}
article:last-child {
 background: yellow;
}

Zde v příkladu jsou tři blokové elementy typu article. Article spadá pod body, takže je tzv. flex-item, neboli jeho flex-prvek. Z body jsme udělali flexbox pomocí display: flex. Všechno, co bude obsahovat body je závislé na tomto obalovači. Prvky se mohou podle něho roztáhnout nebo zúžit atd. Například naše tři elementy poskládané zatím vedle sebe se rozšíří podle textu, který obsahují a výšku si vezmou podle toho, kolik mu kontejner dovolí. Při zmenšování obrazovky se flexibilně přizpůsobují.
Flexbox atributy rozdělujeme podle toho, zda se přidávají kontejneru či prvkům v něm:

Některé Flex container vlastnosti:

display - zarovná celý obsah.
flex-direction - směr, kterým flexujeme, buď sloupec nebo řádek …column nebo row.
flex-wrap - když se element nevejde do jednoho řádku na ose, hodí se do dalšího řádku bez media queries.
align-content - zarovnání na cross axis.
justify - content - zarovnání na main axis. Obsahuje atributy stejné jako align-content : flex-start, flex-end, center, space-between (rozpočítá mezery mezi elementy na celou výšku/šířku elementu), space-around.
- umístění na obou osách - hodnoty atributů udávají začátek flexu a konec flexu. Neurčujeme např. zarovnání vpravo - vlevo, jelikož na příčné ose by to nemělo smysl.
(Flex- start je na příčné ose nahoře a na hlavní ose napravo).
align-items - zarovná jednotlivé elementy.

Některé Flex items vlastnosti:

order - můžeme přehodit pořadí elementů jednoduše v css přiřazením čísla jako atributu.
flex-grow - dynamicky dopočítává velikosti jednotlivých elementů, když některý například určením hodnoty několikrát zvětším (responzivní design – při zvětšování a zmenšování obrazovky se sami uspořádají proporčně podle obrazovky, tento zůstává nejrozměrnější).
flex-shrink - dynamicky dopočítává velikosti jednotlivých elementů, když některý například určením hodnoty několikrát zmenším.
flex-basic - nastavení defaultní velikosti elementu např. 300px, tuto hodnotu se snaží udržet v každém zařízení, ve větším rozlišení však může mít větší hodnotu…
flex
align-self - zarovnání jednotlivého elementu (vyjmutí z řady).

Hlavní věcí, co prohlížeče zajímá, je v jakém směru chceme zarovnávat prvky. K tomu nám slouží právě vlastnost flex-direction. Jeho atributy jsou buď column (sloupec) či row (řádek).

responzivní design

V našem příkladu jsou ještě použity:
align-items: center;
- elementy se uspořádají vertikálně na střed.

responzivní design

a justify- content: center
-zarovná elementy na střed celé obrazovky.

responzivní design

Názorný příklad použití vlastnosti flex-wrap:

responzivní design

css-tricks.com/snippets/css/a-guide-to-flexbox

Pomocí flexboxu nám vzniká stránka, která se nerozbije a je flexibilní. Pro mobilní zařízení je flex ideální, podpora moderních prohlížečů je vysoká.
Přidáním atributu order u items můžeme jednoduše přehodit části v layoutu třeba s pomocí media queries:

flexbox {
 display: flex;
 flex-flow: row;
}
article > section { order:1; }
article > aside { order:2; }

@media (orientation:…)
{
 .flexbox { flex-flow:column; }
 .flex1 { order:2; }
 .flex3 { order:1; }
}

Na flexu se dá založit celý design:

responzivní design

css-tricks.com/using-flexbox

blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox

Bohužel podpora prohlížečů je dost rozdílná a je nutné se s tím poprat pomocí prefixů:

Například zde nestačí jen display: flex, takhle hrozně musíme kód upravit:

.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

A co IE9 a další starší prohlížeče? Můžeme detekovat nepodporu flexboxu pomocí modernizru a použít .no-flexbox { … }. Jako alternativu by bylo také dobré nabídnout jinou verzi layoutu.
Doporučuji vyzkoušet si protáhnout vše autoprefixem anebo navštívit zajímavé odkazy, kde hodně věcí udělají za vás.
:-) - pleeease.io