Właściwość align-items

Właściwość align-items ustawia wyrównanie elementów wzdłuż osi poprzecznej dla kontenerów flex oraz wzdłuż osi pionowej dla siatki CSS Grid. Stosuje się do elementu rodzica.

Składnia

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

Wartości

Wartość	Opis
`flex-start`	Elementy są przyciągnięte do początku osi poprzecznej (pionowej).
`flex-end`	Elementy są przyciągnięte do końca osi poprzecznej (pionowej).
`center`	Elementy są wyśrodkowane wzdłuż osi poprzecznej (pionowej).
`baseline`	Elementy są wyrównane do 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'` i `'y'`.
`stretch`	Elementy są rozciągnięte, zajmując całą dostępną przestrzeń wzdłuż osi poprzecznej, przy czym uwzględniane są wartości `min-width` i `max-width`, jeśli są ustawione. Jeśli jednak dla elementów ustawiono szerokość i wysokość - wartość `stretch` zostanie zignorowana.

Wartość domyślna: stretch.

Przykład . Wartość stretch

Główna oś jest skierowana od lewej do prawej, a elementy są rozciągnięte na całej wysokości wzdłuż osi poprzecznej:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Przykład . Wartość stretch + wymiary elementu

Elementy mają ustawioną szerokość i wysokość, dlatego wartość stretch dla właściwości align-items zostanie zignorowana:

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

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

Przykład . Wartość flex-start bez wymiarów elementu

Elementy będą przyciągnięte do górnej krawędzi:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Przykład . Wartość flex-start + wymiary elementu

Elementy nadal będą przyciągnięte do górnej krawędzi, jednak będą miały ustawioną szerokość i wysokość:

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

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

Przykład . Wartość flex-end + wymiary elementu

Elementy będą przyciągnięte do dolnej krawędzi:

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

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

Przykład . Wartość center + wymiary elementu

Elementy będą wyśrodkowane wzdłuż osi poprzecznej (w tym przypadku pionowo):

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Przykład . Wartość center, elementy o różnych rozmiarach

Elementy mają różną wysokość (są rozciągane przez tekst, ale można również ustawić height), szerokość jest taka sama dla wszystkich, ponieważ ustawiono właściwość width:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Przykład . Wartość baseline, elementy o różnych rozmiarach

A tak wygląda wyrównanie do linii bazowej:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	border: 1px solid #696989;
}

Przykład . Wyrównanie do początku osi pionowej w siatce Grid

Wyrównajmy nasze elementy wewnątrz komórek do początku osi pionowej:

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

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	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;
}

Spójrzmy teraz na naszą siatkę w narzędziach deweloperskich przeglądarki:

Przykład . Wyrównanie do środka osi pionowej w siatce Grid

A teraz wyrównajmy nasze elementy w komórkach do środka osi pionowej:

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

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	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;
}

Spójrzmy na wyświetlanie siatki w narzędziach deweloperskich:

Przykład . Wyrównanie do końca osi pionowej w siatce Grid

Znów zmieńmy wyrównanie elementów, tym razem do końca osi pionowej:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	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 {
	
}

A teraz zobaczmy jak wygląda nasza siatka przez narzędzia deweloperskie:

Zobacz też

właściwość flex-direction,
która ustawia kierunek osi konteneró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 kontenerów flex
właściwość flex-flow,
skrót dla flex-direction i flex-wrap
właściwość order,
która ustawia kolejność elementów flex
właściwość align-self,
która ustawia wyrównanie pojedynczego elementu
właściwość flex-basis,
która ustawia rozmiar konkretnego elementu flex
właściwość flex-grow,
która ustawia współczynnik rozciągania elementów flex
właściwość flex-shrink,
która ustawia współczynnik kurczenia elementów flex
właściwość flex,
skrót dla flex-grow, flex-shrink i flex-basis