Egenskapen align-items

Egenskapen align-items sätter justeringen av element längs tväraxeln för flex-containrar och längs den vertikala axeln för grid. Tillämpas på förälderelementet.

Syntax

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

Värden

Värde	Beskrivning
`flex-start`	Elementen är tryckta mot början av tväraxeln (vertikal axel).
`flex-end`	Elementen är tryckta mot slutet av tväraxeln (vertikal axel).
`center`	Elementen är centrerade längs tväraxeln (vertikal axel).
`baseline`	Elementen justeras efter sin baslinje. Baslinjen är en imaginär linje som går längs nedre kanten av tecken utan hänsyn till nedhängande delar, till exempel som hos bokstäverna `'p'` och `'y'`.
`stretch`	Elementen sträcks ut för att fylla all tillgänglig plats längs tväraxeln, men `min-width` och `max-width` beaktas fortfarande om de är satta. Om bredd och höjd är satta för elementen - kommer `stretch` att ignoreras.

Standardvärde: stretch.

Exempel . Värdet stretch

Huvudaxeln är riktad från vänster till höger, och längs tväraxeln är elementen utsträckta över hela höjden:

<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;
}

Exempel . Värdet stretch + elementstorlekar

Eftersom bredd och höjd nu är satta för elementen, kommer värdet stretch för egenskapen align-items att ignoreras:

<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;
}

Exempel . Värdet flex-start utan elementstorlekar

Elementen kommer nu att vara tryckta mot toppen:

<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;
}

Exempel . Värdet flex-start + elementstorlekar

Elementen kommer fortfarande att vara tryckta mot toppen, men de kommer nu att ha en specificerad bredd och höjd:

<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;
}

Exempel . Värdet flex-end + elementstorlekar

Elementen kommer nu att vara tryckta mot botten:

<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;
}

Exempel . Värdet center + elementstorlekar

Elementen kommer nu att vara centrerade längs tväraxeln (i detta fall vertikalt):

<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;
}

Exempel . Värdet center, element av olika storlek

Elementen har nu olika höjd (de sträcks ut av texten, men man kan också sätta height), bredden är densamma för alla, eftersom egenskapen width är satt:

<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;
}

Exempel . Värdet baseline, element av olika storlek

Så här ser justering efter baslinjen ut:

<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;
}

Exempel . Justering mot början av den vertikala axeln i grid

Låt oss justera våra element inuti cellerna mot början av den vertikala axeln:

<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;
}

Låt oss nu titta på vårt grid i webbläsarens utvecklarverktyg:

Exempel . Justering i mitten av den vertikala axeln i grid

Låt oss nu justera våra element i cellerna till mitten av den vertikala axeln:

<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;
}

Låt oss titta på hur gridden renderas i utvecklarverktyget:

Exempel . Justering mot slutet av den vertikala axeln i grid

Vi ändrar elementens justering igen, den här gången mot slutet av den vertikala axeln:

<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 {
	
}

Låt oss nu se hur vårt grid ser ut via utvecklarverktyget:

Se även

egenskapen flex-direction,
som sätter riktningen på axlarna för flex-containrar
egenskapen justify-content,
som sätter justeringen längs huvudaxeln
egenskapen align-items,
som sätter justeringen längs tväraxeln
egenskapen flex-wrap,
som sätter radbrytning för flex-containrar
egenskapen flex-flow,
förkortning för flex-direction och flex-wrap
egenskapen order,
som sätter ordningen på flex-element
egenskapen align-self,
som sätter justeringen för ett enskilt element
egenskapen flex-basis,
som sätter storleken på ett specifikt flex-element
egenskapen flex-grow,
som sätter "glupskheten" hos flex-element
egenskapen flex-shrink,
som sätter ihopdragbarheten hos flex-element
egenskapen flex,
förkortning för flex-grow, flex-shrink och flex-basis