WebDev.wiki > CSS > CSS vlastnosti a hodnoty > align-content

align-content

Definice a použití

Vlastnost align-content zarovná flexibilní elementy podle vedlejší osy (tj osy kolmé na osu hlavní) pokud se okolo flexibilních elementů nachází volné místo. Vlastnost nemá vliv na flexibilní elementy, které nejsou zalomené na více než jeden řádek. Vlastnost má efekt pouze na elementy, které jsou dceřinnými elementy elementu s display nastaveným na flex nebo inline-flex.

Hodnoty vstupů	Popis
stretch	Roztáhne flexibilní elementy aby zabíraly zbytek volného místa (defaultní hodnota)
flex-start	Zarovná flexibilní elementy od začátku
center	Zarovná flexibilní elementy na střed
flex-end	Zarovná flexibilní elementy od konce
space-between	Mezery jsou stejnoměrně rozděleny mezi flexibilní elementy
space-around	Mezery jsou stejnoměrně rozděleny okolo flexibilních elementů
initial	Nastaví hodnotu na defaultní
inherit	Dědí hodnotu od mateřského elementu

Ukázka:

CSS

/* CSS pro lepší čitelnost ukázky */
div {
	background: #60c545;
	padding: 10px;
	height: 250px;
}
div div {
	width: 30%;
	font-size: 150%;
	border: 1px solid #FF0000;
	text-align: center;
	background: #FFF;
	border-sizing: border-box;
	height: auto;
}

/* Dceřinné flexibilní elementy se roztáhnou */
#flex-stretch {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
}

/* Dceřinné flexibilní elementy se zarovnají od začátku */
#flex-flex-start {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

/* Dceřinné flexibilní elementy se zarovnají od konce */
#flex-flex-end {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
}

/* Dceřinné flexibilní elementy se zarovnají na střed */
#flex-center {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

/* Mezery se stejnoměrně rozdělí mezi flexibilní elementy */
#flex-space-between {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

/* Mezery se stejnoměrně rozdělí okolo flexibilních elementů */
#flex-space-around {
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
}

Použité vlastnosti: background, padding, height, width, font-size, border, text-align, display, flex-wrap, align-content

HTML

Dceřinné flexibilní elementy se roztáhnou:
<div id="flex-stretch">
	<div>box 1</div>
	<div>box 2</div>
	<div>box 3</div>
	<div>box 4</div>
	<div>box 5</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají od začátku:
<div id="flex-flex-start">
	<div>box 1</div>
	<div>box 2</div>
	<div>box 3</div>
	<div>box 4</div>
	<div>box 5</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají od konce:
<div id="flex-flex-end">
	<div>box 1</div>
	<div>box 2</div>
	<div>box 3</div>
	<div>box 4</div>
	<div>box 5</div>
</div>

<br/>

Dceřinné flexibilní elementy se zarovnají na střed:
<div id="flex-center">
	<div>box 1</div>
	<div>box 2</div>
	<div>box 3</div>
	<div>box 4</div>
	<div>box 5</div>
</div>

<br/>

Mezery se stejnoměrně rozdělí mezi flexibilní elementy:
<div id="flex-space-between">
	<div>box 1</div>
	<div>box 2</div>
	<div>box 3</div>
	<div>box 4</div>
	<div>box 5</div>
</div>

<br/>

Mezery se stejnoměrně rozdělí okolo flexibilních elementů:
<div id="flex-space-around">
	<div>box 1</div>
	<div>box 2</div>
	<div>box 3</div>
	<div>box 4</div>
	<div>box 5</div>
</div>

Použité tagy: <div>

Výsledek:

Dceřinné flexibilní elementy se roztáhnou:

box 1

box 2

box 3

box 4

box 5

Dceřinné flexibilní elementy se zarovnají od začátku:

box 1

box 2

box 3

box 4

box 5

Dceřinné flexibilní elementy se zarovnají od konce:

box 1

box 2

box 3

box 4

box 5

Dceřinné flexibilní elementy se zarovnají na střed:

box 1

box 2

box 3

box 4

box 5

Mezery se stejnoměrně rozdělí mezi flexibilní elementy:

box 1

box 2

box 3

box 4

box 5

Mezery se stejnoměrně rozdělí okolo flexibilních elementů:

box 1

box 2

box 3

box 4

box 5

Podpora webových prohlížečů

Firefoxversion: 28

Internet Explorerversion: 11

Google Chromeversion: 21

Safariversion: 9

Operaversion: 12