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

align-self

Definice a použití

Vlastnost align-self se používá pro zarovnání specifického flexibilního elementu nehledě na vlastnost align-items nastavenou pro mateřský element. 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
auto	Zarovnání podle vlastnosti align-items mateřského elementu (defaultní hodnota)
stretch	Roztáhne flexibilní element přes celý mateřský element
flex-start	Zarovná flexibilní element na začátek mateřského elementu
center	Zarovná flexibilní element na střed mateřského elementu
flex-end	Zarovná flexibilní element na konec mateřského elementu
baseline	Zarovná flexibilní element podle prvního řádku mateřského elementu
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: 10%;
	border: 1px solid #FF0000;
	text-align: center;
	background: #FFF;
	border-sizing: border-box;
	height: auto;
}

/* Defaultně nastavíme, aby se flexibilní elementy řadili na začátek */
.flexbox {
	display: flex;
	align-content: flex-start;
	justify-content: space-around;
}

/* Flexibilní element se roztáhne */
.flexbox #flex-stretch {
	align-self: stretch;
}

/* Flexibilní element se zarovná od začátku */
.flexbox #flex-flex-start {
	align-self: flex-start;
}

/* Flexibilní element se zarovná od konce */
.flexbox #flex-flex-end {
	align-self: flex-end;
}

/* Flexibilní element se zarovná na střed */
.flexbox #flex-center {
	align-self: center;
}

/* Flexibilní element se zarovná podle první řádky */
.flexbox #flex-baseline {
	align-self: baseline;
}

Použité vlastnosti: background, padding, height, width, border, text-align, display, align-content, justify-content, align-self

HTML

Flexibilní elementy jsou defaultně nastavené, aby byly zarovnány od začátku, ale každý z nich má nastavené své idividuální zarovnání:
<div class='flexbox'>
	<div id='flex-stretch'>stretch</div>
	<div id='flex-flex-start'>flex-start</div>
	<div id='flex-flex-end'>flex-end</div>
	<div id='flex-center'>center</div>
	<div id='flex-baseline'>baseline</div>
</div>

Použité tagy: <div>

Výsledek:

Flexibilní elementy jsou defaultně nastavené, aby byly zarovnány od začátku, ale každý z nich má nastavené své idividuální zarovnání:

stretch

flex-start

flex-end

center

baseline

Podpora webových prohlížečů

Firefoxversion: 20

Internet Explorerversion: 11

Google Chromeversion: 21

Safariversion: 9

Operaversion: 12