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

align-items

Definice a použití

Vlastnost align-items umožňuje určovat řazení flexibilních elemetů podle vedlejší osy (tj podle osy kolmé na osu hlavní). Align-items by se dal přirovnat k CSS vlastnosti justify-content, pouze řadí elementy podle vedlejší osy. 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 přes celý mateřský element (defaultní hodnota)
flex-start	Zarovná flexibilní elementy na začátek mateřského elementu
center	Zarovná flexibilní elementy na střed mateřského elementu
flex-end	Zarovná flexibilní elementy na konec mateřského elementu
baseline	Flexibilní elementy jsou zarovnány podle prvního řádku
initial	Nastaví hodnotu na defaultní
inherit	Dědí hodnotu od mateřského elementu

Ukázka:

CSS

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

#flex-baseline > div:nth-child(1) {
	padding-top: 10px;
}

#flex-baseline > div:nth-child(2) {
	padding-top: 35px;
}

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

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

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

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

/* Dceřinné flexibilní elementy se zarovnají podle první řádky */
#flex-baseline {
	display: flex;
	align-items: baseline;
}

Použité vlastnosti: justify-content, background, padding, width, font-size, border, text-align, padding-top, display, align-items

HTML

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

<br/>

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

<br/>

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

<br/>

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

<br/>

Dceřinné flexibilní elementy se zarovnají podle první řádky:
<div id="flex-baseline">
	<div>box 1<br/>box1</div>
	<div>box 2</div>
	<div>box 3<br/>box3<br/>box3</div>
</div>

Použité tagy: <div>

Výsledek:

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

box 1
box1

box 2

box 3
box3
box3

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

box 1
box1

box 2

box 3
box3
box3

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

box 1
box1

box 2

box 3
box3
box3

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

box 1
box1

box 2

box 3
box3
box3

Dceřinné flexibilní elementy se zarovnají podle první řádky:

box 1
box1

box 2

box 3
box3
box3

Podpora webových prohlížečů

Firefoxversion: 20

Internet Explorerversion: 11

Google Chromeversion: 21

Safariversion: 9

Operaversion: 12