Eienskap align-self

Die eienskap align-self spesifiseer die belyning langs die dwarasis vir 'n individuele flex-blok en langs die vertikale as vir 'n individuele element in 'n rooster. In wese verteenwoordig hierdie eienskap die eienskap align-items, maar vir 'n spesifieke blok.

Sintaksis

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

Waardes

Waarde	Beskrywing
`flex-start`	Die blok word teen die begin van die dwarasis gedruk.
`flex-end`	Die blok word teen die einde van die dwarasis gedruk.
`center`	Die blok is in die middel van die dwarasis gesentreer.
`baseline`	Die blok word volgens sy basislyn gebelyn. 'n Basislyn is 'n denkbeeldige lyn, wat langs die onderkant van karakters loop sonder om afhangende dele in ag te neem, byvoorbeeld soos by die letters `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Die blok is uitgerek om alle beskikbare ruimte langs die dwarasis te vul, maar `min-width` en `max-width` word steeds in ag geneem, indien gespesifiseer. Indien breedte en hoogte vir die element gespesifiseer is - sal `stretch` geïgnoreer word.
`auto`	Die blok sal soos gespesifiseer in die eienskap `align-items` gebelyn word.

Verstekwaarde: auto.

Voorbeeld . Waarde stretch

In hierdie voorbeeld is die waarde flex-start aan alle blokke toegeken (eienskap align-items), en aan die derde blok - align-self met die waarde 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;
}

Voorbeeld . Waarde flex-end

In hierdie voorbeeld is die waarde flex-start vir die eienskap align-items aan alle blokke toegeken, en aan die derde blok - align-self met die waarde 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;
}

Voorbeeld . Belyning teen die begin van die vertikale as in 'n rooster

Laat ons die belyning vir die eerste element teen die begin van die vertikale as stel:

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

Voorbeeld . Belyning in die middel van die vertikale as in 'n rooster

Laat ons die belyning van die eerste element in die middel van die vertikale as stel:

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

Voorbeeld . Belyning teen die einde van die vertikale as in 'n rooster

Laat ons die belyning vir ons eerste element in die rooster teen die einde van die vertikale as stel:

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

Sien ook

eienskap flex-direction,
wat die rigting van die asse van flex blokke spesifiseer
eienskap justify-content,
wat die belyning langs die hoofas spesifiseer
eienskap align-items,
wat die belyning langs die dwarasis spesifiseer
eienskap flex-wrap,
wat die veelreëlbaarheid van flex blokke spesifiseer
eienskap flex-flow,
afkorting vir flex-direction en flex-wrap
eienskap order,
wat die volgorde van flex blokke spesifiseer
eienskap flex-basis,
wat die grootte van 'n spesifieke flex blok spesifiseer
eienskap flex-grow,
wat die groeigierigheid van flex blokke spesifiseer
eienskap flex-shrink,
wat die inkrimping van flex blokke spesifiseer
eienskap flex,
afkorting vir flex-grow, flex-shrink en flex-basis