align-self հատկությունը

align-self հատկությունը սահմանում է դասավորումը լայնակի առանցքի ուղղությամբ առանձին վերցված flex-բլոկի և ուղղահայաց առանցքի ուղղությամբ առանձին տարրի համար ցանցում: Ըստ էության այս հատկությունը ներկայացնում է align-items հատկությունը, բայց կոնկրետ բլոկի համար:

Շարահյուսություն

ընտրիչ {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Արժեքներ

Արժեք	Նկարագրություն
`flex-start`	Բլոկը սեղմված է լայնակի առանցքի սկզբին:
`flex-end`	Բլոկը սեղմված է լայնակի առանցքի վերջին:
`center`	Բլոկը գտնվում է լայնակի առանցքի կենտրոնում:
`baseline`	Բլոկը դասավորվում է իր բազային գծի երկայնքով: Բազային գիծը երևակայական գիծ է, որը անցնում է նիշերի ստորին եզրով` առանց հաշվի առնելու ծալված մասերը, օրինակ, ինչպես `'p'`, `'q'`, `'y'`, `'g'` տառերն ունեն:
`stretch`	Բլոկը ձգված է, զբաղեցնելով բոլոր հասանելի տեղը լայնակի առանցքի ուղղությամբ, սակայն միևնույն ժամանակ հաշվի են առնվում `min-width` և `max-width`, եթե դրանք սահմանված են: Եթե տարրի համար սահմանված է լայնություն և բարձրություն - `stretch`-ը կանտեսվի:
`auto`	Բլոկը կդասավորվի այնպես, ինչպես սահմանված է `align-items` հատկությունում:

Լռելայն արժեքը՝ auto:

Օրինակ . Stretch արժեքը

Այս օրինակում բոլոր բլոկներին տրված է flex-start արժեքը (align-items հատկությունը), իսկ երրորդ բլոկին՝ align-self հատկությունը 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;
}

Օրինակ . Flex-end արժեքը

Այս օրինակում բոլոր բլոկների համար align-items հատկությանը տրված է flex-start արժեքը, իսկ երրորդ բլոկին՝ align-self հատկությունը 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;
}

Օրինակ . Դասավորում ուղղահայաց առանցքի սկզբում ցանցում

Եկեք սահմանենք առաջին տարրի դասավորումը ուղղահայաց առանցքի սկզբում:

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

Օրինակ . Դասավորում ուղղահայաց առանցքի կենտրոնում ցանցում

Եկեք սահմանենք առաջին տարրի դասավորումը ուղղահայաց առանցքի կենտրոնում:

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

Օրինակ . Դասավորում ուղղահայաց առանցքի վերջում ցանցում

Եկեք սահմանենք մեր առաջին տարրի դասավորումը ցանցում ուղղահայաց առանցքի վերջում:

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

Տես նաև

flex-direction հատկությունը,
որը սահմանում է flex բլոկների առանցքների ուղղությունը
justify-content հատկությունը,
որը սահմանում է դասավորությունը գլխավոր առանցքի ուղղությամբ
align-items հատկությունը,
որը սահմանում է դասավորությունը լայնակի առանցքի ուղղությամբ
flex-wrap հատկությունը,
որը flex բլոկների բազմատողայնությունն է
flex-flow հատկությունը,
կրճատում flex-direction-ի և flex-wrap-ի համար
order հատկությունը,
որը սահմանում է flex բլոկների հերթականությունը
flex-basis հատկությունը,
որը սահմանում է կոնկրետ flex բլոկի չափը
flex-grow հատկությունը,
որը սահմանում է flex բլոկների ագահությունը
flex-shrink հատկությունը,
որը սահմանում է flex բլոկների սեղմելիությունը
flex հատկությունը,
կրճատում flex-grow, flex-shrink և flex-basis-ի համար