Flexbox
Nové možnosti z hlediska layoutu
Zjednodušeně vytvoříme si kontejner s Flexboxem a každému z jeho vnitřních elementů přidělíme počet sloupců
Flexbox si pak šířku přepočítává dle velikosti kontejneru
U flexboxu jsou sloupce stejně dlouhé jako nejdelší sloupec.
Výška sloupců je určovvána atomaticky nebo můžeme použít omezení max-height
Teoretický příklad
První sloupec Flex:1;
Druhý sloupec Flex:3;
Třetí sloupec Flex:2;
Celkem je to 1+3+2=6 dílů
První sloupec tedy zabere 1/6 šířky kontejneru, druhý 3/6 a třetí 2/6
Pokud je šířka kontejneru 300px, pak první sloupec bude 50px, druhý 150px a třetí 100px
Pokud je šířka kontejneru 600px, pak první sloupec bude 100px, druhý 300px a třetí 200px
Pokud je šířka kontejneru 900px, pak první sloupec bude 150px, druhý 450px a třetí 300px
atd.
V praxi to vypadá takto:
Flexbox odkaz na ukázkovou stránku se třemi sloupci
Takto vypadá kód odkazované stránky
<!DOCTYPE html >
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid - Flexbox</title>
<link rel="stylesheet" href="../022/css/styles.css">
</html>>
< body>
<div class="container" id="Flexbox">
<!-- navigační menu vlevo -->
<nav class="item1">
<ul>
<li>Jablka</li>
<li>Hrušky</li>
<li>Pušky</li>
<li>Nušky</li>
<li>Růžky</li></ul>
</nav>
<!-- hlavní obsah -->
<div class="item2">
<p>Lorem ipsum dolor sit amet consectetuer orci ...</p>
<p>At adipiscing mauris metus arcu et commodo et Vivamus et id...</p>
<p>Ipsum convallis pellentesque lacinia eget et tempus at quis... </p>
<p>Elit felis sed Suspendisse Curabitur accumsan cursus... </p>
<p>Rhoncus nisl sollicitudin id Morbi Sed lacus nibh ...</p>
</div>
<!-- pravý sloupec -->
<div class="item3">
<table>
<tr><th>HTML</th><th>CSS</th></tr>
<tr><td><code><div class="container"></code></td><td><code>.container { display: flex; }</code></td></tr>
<tr><td><code><div class="item1"></code></td><td><code>.item1 { flex: 1; }</code></td></tr>
<tr><td><code><div class="item2"></code></td><td><code>.item2 { flex: 3; }</code></td></tr>
<tr><td><code><div class="item3"></code></td><td><code>.item3 { flex: 2; }</code></td></tr>
<tr><td><code></div></code></td><td></td></tr>
</table>
</div>
</div><!-- konec container -->
</body>
< >
CSS
Stylování je klasické
Pro obrazovky menší 800 px přesuneme prostřední sloupek na pozici číslo 1 a třetí sloupek necháme zmizet.
.item2 { order: -1; }
.item3 { display:none; visibility: hidden; }
Kompletní CSS pro uvedený příklad
.container { border:1px solid #ccc; padding:10px; display:flex; gap:10px; background-color:#eee; margin-bottom:20px; }
.item1 { background-color:#f99; flex:1; padding:10px; border:1px solid #900; }
.item2 { background-color:#9f9; flex:3; padding:10px; border:1px solid #090; }
.item3 { background-color:#99f; flex:2; padding:10px; border:1px solid #009 ;}
/* Responsivní do 800px (prostrední sloupek posuneme vlevo a třetí sloupek necháme zmizet) */
@media screen and (max-width: 800px) {
.item2 {order: -1; }
.item3 {display:none; visibility: hidden; }
}