Die align-items eienskap

Die eienskap align-items spesifiseer die uitlyning van elemente langs die dwarsas vir flex blokke en langs die vertikale as vir grids. Word toegepas op die ouer element.

Sintaksis

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

Waardes

Waarde	Beskrywing
`flex-start`	Blokke is teen die begin van die dwarsas (vertikale) vasgedruk.
`flex-end`	Blokke is teen die einde van die dwarsas (vertikale) vasgedruk.
`center`	Blokke staan in die middel van die dwarsas (vertikale).
`baseline`	Elemente word volgens hul basislyn uitgelyn. Die basislyn is 'n denkbeeldige lyn wat langs die onderkant van die simbole loop sonder om oorhangende dele in ag te neem, byvoorbeeld soos by die letters `'p'` en `'y'`.
`stretch`	Blokke is uitgerek om al die beskikbare spasie langs die dwarsas in te neem, maar `min-width` en `max-width` word steeds in ag geneem, indien gespesifiseer. As daar egter breedte en hoogte vir die elemente gespesifiseer is - sal `stretch` geïgnoreer word.

Verstekwaarde: stretch.

Voorbeeld . Die stretch waarde

Tans is die hoofas van links na regs gerig, en langs die dwarsas is die elemente oor die volle hoogte uitgerek:

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

Voorbeeld . Die stretch waarde + elementgroottes

Tans is breedte en hoogte vir die elemente gespesifiseer, daarom sal die waarde stretch vir die eienskap align-items geïgnoreer word:

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

Voorbeeld . Die flex-start waarde sonder elementgroottes

Tans sal die elemente teen die bokant vasgedruk word:

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

Voorbeeld . Die flex-start waarde + elementgroottes

Tans sal die elemente steeds teen die bokant vasgedruk wees, maar hulle sal 'n gespesifiseerde breedte en hoogte hê:

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

Voorbeeld . Die flex-end waarde + elementgroottes

Tans sal die elemente teen die onderkant vasgedruk word:

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

Voorbeeld . Die center waarde + elementgroottes

Tans sal die elemente in die middel van die dwarsas staan (in hierdie geval vertikaal):

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

Voorbeeld . Die center waarde, elemente van verskillende groottes

Tans het die elemente verskillende groottes volgens hoogte (tans word hulle deur die teks uitgerek, maar mens kan ook height spesifiseer), die breedte is vir almal dieselfde, aangesien die eienskap width gespesifiseer is:

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

Voorbeeld . Die baseline waarde, elemente van verskillende groottes

En so lyk die uitlyning volgens die basislyn:

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

Voorbeeld . Uitlyning volgens die begin van die vertikale as in 'n grid

Kom ons lyn ons elemente binne die selle volgens die begin van die vertikale as uit:

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

En nou kyk ons na ons grid in die blaaier se debugger:

Voorbeeld . Uitlyning volgens die middel van die vertikale as in 'n grid

En nou lyn ons ons elemente in die selle volgens die middel van die vertikale as uit:

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

Kom ons kyk na die vertoon van die grid in die debugger:

Voorbeeld . Uitlyning volgens die einde van die vertikale as in 'n grid

Weereens verander ons die uitlyning van elemente, hierdie keer volgens die einde van die vertikale as:

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

En nou kyk ons hoe lyk ons grid deur die debugger:

Kyk ook na

die eienskap flex-direction,
wat die rigting van die asse van flex blokke spesifiseer
die eienskap justify-content,
wat die uitlyning langs die hoofas spesifiseer
die eienskap align-items,
wat die uitlyning langs die dwarsas spesifiseer
die eienskap flex-wrap,
wat die veellynigheid van flex blokke spesifiseer
die eienskap flex-flow,
'n afkorting vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex blokke spesifiseer
die eienskap align-self,
wat die uitlyning van een blok spesifiseer
die eienskap flex-basis,
wat die grootte van 'n spesifieke flex blok spesifiseer
die eienskap flex-grow,
wat die gulsigheid van flex blokke spesifiseer
die eienskap flex-shrink,
wat die saamdrukbaarheid van flex blokke spesifiseer
die eienskap flex,
'n afkorting vir flex-grow, flex-shrink en flex-basis