Właściwość align-self

Właściwość align-self ustawia wyrównanie wzdłuż osi poprzecznej dla pojedynczego bloku flex oraz wzdłuż osi pionowej dla pojedynczego elementu w siatce (grid). W zasadzie ta właściwość reprezentuje właściwość align-items, ale dla konkretnego bloku.

Składnia

selektor {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Wartości

Wartość	Opis
`flex-start`	Blok jest dociśnięty do początku osi poprzecznej.
`flex-end`	Blok jest dociśnięty do końca osi poprzecznej.
`center`	Blok znajduje się na środku osi poprzecznej.
`baseline`	Blok jest wyrównany wzdłuż swojej linii bazowej. Linia bazowa - to wyimaginowana linia, przebiegająca wzdłuż dolnej krawędzi znaków bez uwzględnienia wydłużeń dolnych, na przykład, takich jak u liter `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Blok jest rozciągnięty, zajmując całą dostępną przestrzeń wzdłuż osi poprzecznej, jednakże nadal są brane pod uwagę `min-width` i `max-width`, jeśli są ustawione. Jeśli natomiast ustawiona jest szerokość i wysokość dla elementu - `stretch` zostanie zignorowany.
`auto`	Blok będzie wyrównany tak, jak ustawiono we właściwości `align-items`.

Wartość domyślna: auto.

Przykład . Wartość stretch

W tym przykładzie wszystkim blokom ustawiono wartość flex-start (właściwość align-items), a trzeciemu blokowi - align-self z wartością stretch:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

Przykład . Wartość flex-end

W tym przykładzie wszystkim blokom dla właściwości align-items ustawiono wartość flex-start, a trzeciemu blokowi - align-self z wartością flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

Przykład . Wyrównanie do początku osi pionowej w siatce (grid)

Ustawmy wyrównanie dla pierwszego elementu do początku osi pionowej:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: start;
}

Przykład . Wyrównanie do środka osi pionowej w siatce (grid)

Ustawmy wyrównanie pierwszego elementu do środka osi pionowej:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: center;
}

Przykład . Wyrównanie do końca osi pionowej w siatce (grid)

Ustawmy wyrównanie dla naszego pierwszego elementu w siatce do końca osi pionowej:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: end;
}

Zobacz też

właściwość flex-direction,
która ustawia kierunek osi bloków flex
właściwość justify-content,
która ustawia wyrównanie wzdłuż osi głównej
właściwość align-items,
która ustawia wyrównanie wzdłuż osi poprzecznej
właściwość flex-wrap,
która ustawia zawijanie bloków flex
właściwość flex-flow,
skrót dla flex-direction i flex-wrap
właściwość order,
która ustawia kolejność bloków flex
właściwość flex-basis,
która ustawia rozmiar konkretnego bloku flex
właściwość flex-grow,
która ustawia "zachłanność" bloków flex
właściwość flex-shrink,
która ustawia skalowalność bloków flex
właściwość flex,
skrót dla flex-grow, flex-shrink i flex-basis