Egenskapen align-items

Egenskapen align-items setter justering av elementer langs tverrakse for flex-beholdere og langs vertikal akse for grids. Anvendes på foreldreelementet.

Syntaks

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

Verdier

Verdi	Beskrivelse
`flex-start`	Bokser presset mot starten av tverrakse (vertikal).
`flex-end`	Bokser presset mot slutten av tverrakse (vertikal).
`center`	Bokser plassert i senter av tverrakse (vertikal).
`baseline`	Elementer justeres etter sin basislinje. Basislinje er en tenkt linje som går langs bunnen av tegn uten hengende deler, for eksempel som hos bokstavene `'p'` og `'y'`.
`stretch`	Bokser strekkes for å fylle all tilgjengelig plass langs tverrakse, men `min-width` og `max-width` blir fortsatt tatt i betraktning hvis satt. Hvis bredde og høyde er satt for elementer - vil `stretch` bli ignorert.

Standardverdi: stretch.

Eksempel . Verdien stretch

Nå er hovedaksen rettet fra venstre til høyre, og langs tverrakse er elementene strukket over hele høyden:

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

Eksempel . Verdien stretch + elementstørrelser

Nå er bredde og høyde satt for elementene, derfor vil verdien stretch for egenskapen align-items bli ignorert:

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

Eksempel . Verdien flex-start uten elementstørrelser

Nå vil elementene være presset 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;
}

Eksempel . Verdien flex-start + elementstørrelser

Nå vil elementene fortsatt være presset mot toppen, men de vil ha satt bredde og høyde:

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

Eksempel . Verdien flex-end + elementstørrelser

Nå vil elementene være presset mot bunnen:

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

Eksempel . Verdien center + elementstørrelser

Nå vil elementene stå i senter langs tverrakse (i dette tilfellet 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;
}

Eksempel . Verdien center, elementer med ulik størrelse

Nå har elementene ulik størrelse i høyden (de utvides nå av teksten, men man kan også sette height), bredden er lik for alle, siden egenskapen width er 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;
}

Eksempel . Verdien baseline, elementer med ulik størrelse

Og slik ser justering etter basislinje 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;
}

Eksempel . Justering mot start av vertikal akse i grid

La oss justere elementene våre inne i celler mot starten av vertikal akse:

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

La oss nå se på gridet vårt i nettleserens debugger:

Eksempel . Justering i senter av vertikal akse i grid

La oss nå justere elementene våre i celler i senter av vertikal akse:

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

La oss se på visningen av gridet i debuggeren:

Eksempel . Justering mot slutt av vertikal akse i grid

Endrer justering av elementer igjen, denne gangen mot slutten av vertikal akse:

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

La oss nå se hvordan gridet vårt ser ut via debuggeren:

Se også

egenskapen flex-direction,
som setter retning på akser for flex-beholdere
egenskapen justify-content,
som setter justering langs hovedakse
egenskapen align-items,
som setter justering langs tverrakse
egenskapen flex-wrap,
som setter flerlinjethet for flex-beholdere
egenskapen flex-flow,
forkortelse for flex-direction og flex-wrap
egenskapen order,
som setter rekkefølge på flex-beholdere
egenskapen align-self,
som setter justering for en enkelt beholder
egenskapen flex-basis,
som setter størrelse for en spesifikk flex-beholder
egenskapen flex-grow,
som setter grådighet for flex-beholdere
egenskapen flex-shrink,
som setter krympbarhet for flex-beholdere
egenskapen flex,
forkortelse for flex-grow, flex-shrink og flex-basis