align-content - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti align-content nastavujeme vertikální pozicování flex elementů. Jedná se o vlastnost k pozicování ve flexboxu.
Hodnoty
- stretch (výchozí) - Elementy jsou namačkané na sebe a začínají se svým rodičovským elementem.
- center - Elementy jsou umístěné doprostřed rodičovského elementu.
- flex-start - První element je zarovnán se začátkem rodičovského elementu.
- flex-end - Poslední element je zarovnán s koncem rodičovského elementu.
- space-between - Mezi elementy jsou stejné mezery.
- space-around - Okolo elementů jsou stejné mezery.
- initial - Nastaví vlastnost na výchozí hodnotu (tedy na stretch).
Ukázka
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Pro ukázku si vytvořme rodičovský element s ID hlavni. Tomu nastavíme vlastnost display na hodnotu flex, flex-flow na hodnotu row wrap (vlastnost align-content funguje pouze pro vertikální elementy) a align-content na space-around. Do rodičovského kontejneru vytvoříme 3 elementy div se třídou flex. Tato třída bude nastavovat rozměry elementů na 100px × 100px a červenou barvu pozadí.
<!DOCTYPE html>
<html>
<head>
<style>
#hlavni
{
width: 100px;
height: 400px;
border: 1px black solid;
display: flex;
align-content: space-around;
flex-flow: row wrap;
/* Safari */
display: -webkit-flex;
-webkit-align-content: space-around;
-webkit-flex-flow: row wrap;
}
.flex
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<title>align-content</title>
</head>
<body>
<div id="hlavni">
<div class="flex"></div>
<div class="flex"></div>
<div class="flex"></div>
</div>
</body>
</html>Výsledek:
Více o flexboxu v článku Flexbox - tvorba moderních layoutů. Pro horizontální pozicování můžeme použít vlastnost justify-content.
Článek pro vás napsal Jan Lupčík
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Komentáře
Zatím nikdo nevložil komentář - buď první!