Ako na responzívny element s využitím FLEX BOXu
Ukážeme si príklad HTML a CSS kódu na vytvorenie responzívneho elementu s obrázkom a textom vedľa seba. Tento kód používa flexbox a zabezpečuje, že obrázok a text sa zobrazia vedľa seba na širokých obrazovkách a nad sebou na užších obrazovkách.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>blok s textom a obrázkom</title>
<link rel="stylesheet" href="sablona.css">
</head>
<body>
<div class="container">
<div class="image">
<img src="01.jpg" alt="popis obrazku">
</div>
<div class="text">
<p>
No toto je jedno z našich malých bytových plemien. Milý a prítulný spoločník. Pomôže Vám
prekonať ťažké chvíle samoty a smútku. Je to hravý typ psíka. Stále ho beriete ako malé
šteniatko, a spomínate na to, ako ste ho kupovali či dostali. Smútite, keď ste bez neho,
on smúti bez Vás. Má rád chvíle, keď sa vraciate zo školy či z práce. Vy ste jeho jediná
rodina, cíti že ho ľúbite a prejavujete mu lásku. Má Vás ako pána ale aj ako priateľa.
Chce s vami spať v posteli? Máte ho radi a on Vás tiež, nečudo že mu chýbate aj v noci.
Ráno Vás možno zobudí, inokedy zase spí s vami až do obeda. Šteká? Vám to prekáža? On
Vás chce len chrániť pred cudzími ľuďmi. Vycítia na koho majú štekať, k akému psovi sa
priblížiť, s kým sa hrať a koho rešpektovať. Vybrať si ostať, či ujsť? Všetko závisí od
Vás, ako ho máte radi, ako mu tú lásku prejavujete. Lásku mu neprejavíte tým, že ho
budete biť. Prajem Vám najkrajšie dni strávené s Vašim miláčikom.
</p>
</div>
</div>
</body>
</html>
.container {
display: flex; /* Nastaví kontajner ako flexbox kontajner. */
flex-direction: row; /* Riadkové usporiadanie elementov. */
flex-wrap: wrap; /* Povolenie zalamovania obsahu na nový riadok pri nedostatku
miesta v riadku. */
max-width: 800px;
margin: auto;
}
.image {
flex: 1; /* Obrázok bude zaujímať 1/3 šírky pri neresponzívnom usporiadaní. */
margin-right: 20px; /* Medzera medzi obrázkom a textom. */
text-align: center; /* Zarovanie obsahu elementu na stred (v našom prípade obrázka)*/
}
.image img {
max-width: 100%; /* Obrázok zaujme maximálne 100% dostupnej šírky. */
height: auto; /* Výška obrázku sa automaticky nastaví podľa jeho šírky a pomeru strán. */
}
.text {
flex: 2; /* Text bude zaujímať 2/3 šírky pri neresponzívnom usporiadaní. */
font-family: sans-serif; /* Font sa nastaví na sans-serif*/
text-align: justify; /* Zarovnanie textu do bloku (podľa okrajov) */
line-height: 22px; /* Šírka textu medzi riadkami */
}
@media screen and (max-width: 800px) {
.container {
flex-direction: column; /* Pri šírke obrazovky do 600px sa elementy zoradia do stĺpcového usporiadania. */
}
.image {
margin-right: 0; /* Zrušíme medzeru medzi obrázkom a textom. */
margin-bottom: 20px; /* Pridáme medzeru medzi obrázkom a textom v rámci stĺpcového usporiadania. */
}
}
Tento kód používa flexbox a zabezpečuje, že obrázok a text sa zobrazia vedľa seba na širokých obrazovkách a nad sebou na užších obrazovkách.
V CSS kóde sme nastavili kontajner ako flexbox kontajner s riadkovým usporiadaním. V prvom <div> sme umiestnili obrázok a nastavili sme ho ako flex item s pomery 1:1 pomocou flex: 1;. Margin-right nám zabezpečí medzeru medzi obrázkom a textom. V druhom <div> sme umiestnili text a nastavili sme ho ako flex item s pomery 2:1 pomocou flex: 2;.
V obrázku sme použili max-width: 100%; a height: auto;, aby sme zabezpečili, že sa obrázok prispôsobí šírke obrazovky a zároveň zachoval pomer strán.
Použili sme media query, ktorý zmení usporiadanie elementov na stĺpcové pri šírke obrazovky do 600px. V CSS kóde sme pridali media query pomocou @media screen and (max-width: 600px). Následne sme nastavili kontajner na stĺpcové usporiadanie pomocou flex-direction: column;.
V prvom <div> sme zrušili margin-right a pridali margin-bottom, aby sme vytvorili medzeru medzi obrázkom a textom vo vertikálnom smere.
Toto by malo zabezpečiť, že sa elementy zoradia pod seba, keď je šírka obrazovky do 600px.