WebDev.wiki > Návody pro webmastery a vývojáře > Flexbox

Flexbox - Začínáme s HTML

vydáno: 22.07.2016, seriál: Začínáme s HTML

Toto je 18. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Flexbox je nová možnost tvorby layoutu webu. Slovíčko flex znamená v překladu pružný, což znamená že flexboxy jsou pružné elementy designu webu. Tvorba layoutu na flexboxu je jednodušší v tom, že není potřeba počítat s procenty a i případné přehazování prvků je hračkou. V následujícím příkladu si ukážeme, jak zle vytvořit snadno třísloupcový layout se sloupci 1/4, 1/2 a 1/4 šířky.

Zobrazit ukázku

Ukázka:

CSS

#container {
  display: flex;
}

.sidebar-1 {
  flex: 1;
  padding: 10px;
  border: 1px solid #000;
}

.sidebar-2 {
  flex: 1;
  padding: 10px;
  border: 1px solid #000;
}

.central {
  flex: 2;
  padding: 10px;
  border: 1px solid #000;
}

p{
 font-size: 16px;
}

h1 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Použité vlastnosti: display, flex, padding, border, font-size, margin-top, margin-bottom

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Ukázka flexboxu</title>

</head>

<body>

<h1>Ukázka flexboxu</h1>

<div id="container">

  <div class="sidebar-1">
   <p>Obsah prvního sloupce</p>
  </div>
  
  <div class="central">
   <p>Obsah prostředního sloupce</p>
  </div>

  <div class="sidebar-2">
   <p>Obsah třetího sloupce</p>
  </div>

</div>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <div>, <p>

Přehazování pořadí prvků

Pokud bychom chtěli sidebar-2 přesunout úplně na začátek layoutu, stačí zapsat .sidebar-2 {order: -2;}. Pro názornost praktická ukázka.

Zobrazit ukázku

Ukázka:

CSS

#container {
  display: flex;
}

.sidebar-1 {
  flex: 1;
  padding: 10px;
  border: 1px solid #000;
}

.sidebar-2 {
  flex: 1;
  padding: 10px;
  border: 1px solid #000;
  order: -2; /* zmena poradi */
}

.central {
  flex: 2;
  padding: 10px;
  border: 1px solid #000;
}

p{
 font-size: 16px;
}

h1 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Použité vlastnosti: display, flex, padding, border, order, font-size, margin-top, margin-bottom

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Ukázka flexboxu s přehozením prvku layoutu</title>

</head>

<body>

<h1>Ukázka flexboxu s přehozením prvku layoutu</h1>

<div id="container">

  <div class="sidebar-1">
   <p>Obsah prvního sloupce</p>
  </div>
  
  <div class="central">
   <p>Obsah prostředního sloupce</p>
  </div>

  <div class="sidebar-2">
   <p>Obsah třetího sloupce</p>
  </div>

</div>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <h1>, <div>, <p>

Řádky a sloupce

Pro definici sloupců a řádků slouží flex-direction.

Zápis	Význam
flex-direction: column	vykreslení ve sloupci
flex-direction: column-reverse	vykreslení ve sloupci v obráceném pořadí
flex-direction: row	vykreslení v řádku ( výchozí )
flex-direction: row-reverse	vykreslení v řádku v obráceném pořadí

Zarovnáni položek

Zarovnání položek lze udělat přes align-items.

Zápis	Význam
align-items: center	zarovnání na střed
align-items: flex-start	zarovnání zleva
align-items: flex-end	zarovnání zprava
align-items: stretch	roztažení položek na stejnou šířku

Vodorovné zarovnání

Zarovnání položek vodorovně zapíšeme přes justify-content. Používá se jen u zobrazení v řádku.

Zápis	Význam
justify-content: flex-start	zarovnání zleva
justify-content: flex-end	zarovnání zprava
justify-content: center	zarovnání na střed
justify-content: space-between	stejnoměrné rozprostření po prostoru
justify-content: flex-around	stejnoměrné rozprostření po prostoru, jen se nechá prostor i na krajích

Zalamování

Občas je potřeba obsah díky množství zalomit. K tomuto účelu slouží flex-wrap.

Zápis	Význam
flex-wrap: wrap	zalomení obsahu
flex-wrap: wrap-reverse	zalomení obsahu v obráceném pořadí
flex-wrap: nowrap	nic se nezalomí

Podpora webových prohlížečů

Firefoxversion: 22

Internet Explorerversion: 11

Google Chromeversion: 29

Safariversion: 6

Operaversion: 12

Závěr

Vždy je potřeba nadefinovat kontejner a pak jednotlivé prvky flexboxu. Asi je vhodné zmínit, že flexbox je určen pro prvky v layoutu jako jsou formuláře, menu, stránkování atd. U pomalejších zařízeních a případně u pomalých internetových připojeních se vykresluje pomaleji.

HTML: návody jak psát html tagy

CSS: návody na kaskádovité styly

Témata

Seriály