VSC + HTML + CSS
Flexbox
CSS 3 nám dopřálo nové pracování s kontejnery obsahu FLEXBOX.
Ulehčilo práci zejména při vytváření layoutů založených na sloupečcích.
Výhody flexboxu
U flexboxu nastavujeme šířku sloupce pomocí čísla šířku sloupců pomocí čísel (např. levá 1 middle 4 pravá 1). Šíře sloupce se pak automaticky vypočítá, čímž dosáhneme jednouše responzivního layoutu.
Můžeme též měnit pořadí sloupečků podle rozlišení zařízení.
U flexboxu jsou všechny sloupečky stejně vysoké.
Flexbox si rozumí i s omezením počtu znaků v odstavcích p v middle jsme omezili počet znaků na 65em (style.css).
Nevýhody
Staré prohlížeče flexbox nepodporují.
Používání
Pro používání musíme nejdříve obalit svoje "sloupečky" nějakým elementem, kterému nastavíme vlastnost display na hodnotu flex.
Poté si již své sloupce s obsahem můžeme upravovat pomocí vlastností, které CSS 3 ke stylování ve flexboxu nabízí.
Příklad
Vytvořme si 3 sloupečky. Levý, middle a pravý
Přes pravidlo @media pro displej užší než 1200px přesunemé levý za middle před pravý (middle, levý a pravý).
Přes pravidlo @media pro displej užší než 800px přesunemé levý za middle pravý skryjeme.
Výpis HTML
</html>
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Layout pomocí flexboxu</title>
</head>
<body>
<div id="flexbox"> <!-- obal pro sloupečky -->
<!-- levý sloupeček -->
<div id="left">
<h2>Levý sloupek</h2>
<ul>
<li><a href="#">Úvod</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Fórum</a></li>
</ul>
</div>
<!-- prostřední sloupeček -->
<div id="middle">
<h2>Prostřední sloupek</h2>
<p>Lorem ipsum dolor sit amet consectetuer nec Nulla augue ac In ...</p>
<p>Et commodo tellus ipsum auctor malesuada cursus...</p>
<p>Tortor Phasellus nibh urna semper Nam at neque ...</p>
<p>Quis metus leo consectetuer Donec id lobortis pretium ...</p>
</div>
<!-- pravý sloupeček -->
<div id="right">
<h3>Pravý sloupek</h3>
<p>Tato ukázka byla vytvořena pro <a href="https:/ondrisek-petr.cz">petr-ondrisek.cz</a>.</p>
</div>
</div><!-- uzavření obalu flexboxu -->
</body>
</html>
Výpis CSS
#flexbox {
display: flex;
max-width: 98%;
margin: auto;
}
#flexbox div {
border: #8E8E8E 1px solid;
padding: 0.5em 2em;
}
#left {
flex: 1;
background-color: #FFFFF0;
}
#middle {
flex: 3;
background-color: #D1FFCC;
}
#middle > p{
max-width: 65em;/* u prostředního sloupečku omezíme odstavec na 65em */
}
#right {
flex: 1;
background-color: #EFFFDF;
}
/* pomocí čísel určujeme pořadí sloupečků */
@media screen and (max-width: 1200px) {
#left {
order: 1;
}
#right {
order: 2;
background-color: #DFFFEF;
}
}
/* u rozlišení menším 800px necháme pravý sloupec zmizet a levý necháme vpravo */
@media screen and (max-width: 800px) {
#left {
order: 1;
}
#right {
flex: 0;
display: none;
visibility: hidden;
}
}
Ukázka fungování v HTML Flexbox zkusíme si zmenšit okno prohlížeče, aby jsme viděli fungování.
W3schools
CSS Flex Container CSS Flex Items Responsive Flexbox
Ukázka fungování v HTML Responsive Flexbox flex-direction:column;
Zkusíme si zmenšit okno prohlížeče, aby jsme viděli fungování.
/* Responsive FlexBox - při minimálním rozlišení 800 zařadíme sloupky pod sebe a přehážeme je(článek, menu a reklama) */
@media (max-width: 800px) {
#flexbox {
display: flex;
flex-direction: column;
}
}
Ukázka fungování v HTML Responsive Flexbox v %
Zkusíme si zmenšit okno prohlížeče, aby jsme viděli fungování.
<style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 25%;
}
.flex-item-middle {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 25%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
</style>
HTML kousky
width:calc()
Menu
Barvy u zátržítek a boxů
Accordion
Hodiny
Single page
Pricing card
Fluid Layout with Flex
Flexbox
CSS 3 nám dopřálo nové pracování s kontejnery obsahu FLEXBOX.
Ulehčilo práci zejména při vytváření layoutů založených na sloupečcích.
Výhody flexboxu
U flexboxu nastavujeme šířku sloupce pomocí čísla šířku sloupců pomocí čísel (např. levá 1 middle 4 pravá 1). Šíře sloupce se pak automaticky vypočítá, čímž dosáhneme jednouše responzivního layoutu.
Můžeme též měnit pořadí sloupečků podle rozlišení zařízení.
U flexboxu jsou všechny sloupečky stejně vysoké.
Flexbox si rozumí i s omezením počtu znaků v odstavcích p v middle jsme omezili počet znaků na 65em (style.css).
Nevýhody
Staré prohlížeče flexbox nepodporují.
Používání
Pro používání musíme nejdříve obalit svoje "sloupečky" nějakým elementem, kterému nastavíme vlastnost display na hodnotu flex.
Poté si již své sloupce s obsahem můžeme upravovat pomocí vlastností, které CSS 3 ke stylování ve flexboxu nabízí.
Příklad
Vytvořme si 3 sloupečky. Levý, middle a pravý
Přes pravidlo @media pro displej užší než 1200px přesunemé levý za middle před pravý (middle, levý a pravý).
Přes pravidlo @media pro displej užší než 800px přesunemé levý za middle pravý skryjeme.
Výpis HTML
</html>
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Layout pomocí flexboxu</title>
</head>
<body>
<div id="flexbox"> <!-- obal pro sloupečky -->
<!-- levý sloupeček -->
<div id="left">
<h2>Levý sloupek</h2>
<ul>
<li><a href="#">Úvod</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Fórum</a></li>
</ul>
</div>
<!-- prostřední sloupeček -->
<div id="middle">
<h2>Prostřední sloupek</h2>
<p>Lorem ipsum dolor sit amet consectetuer nec Nulla augue ac In ...</p>
<p>Et commodo tellus ipsum auctor malesuada cursus...</p>
<p>Tortor Phasellus nibh urna semper Nam at neque ...</p>
<p>Quis metus leo consectetuer Donec id lobortis pretium ...</p>
</div>
<!-- pravý sloupeček -->
<div id="right">
<h3>Pravý sloupek</h3>
<p>Tato ukázka byla vytvořena pro <a href="https:/ondrisek-petr.cz">petr-ondrisek.cz</a>.</p>
</div>
</div><!-- uzavření obalu flexboxu -->
</body>
</html>
Výpis CSS
#flexbox {
display: flex;
max-width: 98%;
margin: auto;
}
#flexbox div {
border: #8E8E8E 1px solid;
padding: 0.5em 2em;
}
#left {
flex: 1;
background-color: #FFFFF0;
}
#middle {
flex: 3;
background-color: #D1FFCC;
}
#middle > p{
max-width: 65em;/* u prostředního sloupečku omezíme odstavec na 65em */
}
#right {
flex: 1;
background-color: #EFFFDF;
}
/* pomocí čísel určujeme pořadí sloupečků */
@media screen and (max-width: 1200px) {
#left {
order: 1;
}
#right {
order: 2;
background-color: #DFFFEF;
}
}
/* u rozlišení menším 800px necháme pravý sloupec zmizet a levý necháme vpravo */
@media screen and (max-width: 800px) {
#left {
order: 1;
}
#right {
flex: 0;
display: none;
visibility: hidden;
}
}
Ukázka fungování v HTML Flexbox zkusíme si zmenšit okno prohlížeče, aby jsme viděli fungování.
W3schools
CSS Flex Container CSS Flex Items Responsive Flexbox
Ukázka fungování v HTML Responsive Flexbox flex-direction:column;
Zkusíme si zmenšit okno prohlížeče, aby jsme viděli fungování.
/* Responsive FlexBox - při minimálním rozlišení 800 zařadíme sloupky pod sebe a přehážeme je(článek, menu a reklama) */
@media (max-width: 800px) {
#flexbox {
display: flex;
flex-direction: column;
}
}
Ukázka fungování v HTML Responsive Flexbox v %
Zkusíme si zmenšit okno prohlížeče, aby jsme viděli fungování.
<style>
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.flex-item-left {
background-color: #f1f1f1;
padding: 10px;
flex: 25%;
}
.flex-item-middle {
background-color: #f1f1f1;
padding: 10px;
flex: 50%;
}
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 25%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
</style>