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

justify-self հատկությունը սահմանում է ցանցում առանձին տարրի հորիզոնական առանցքի ուղղահայաց դասավորությունը: Հատկությունը կիրառվում է այն տարրի նկատմամբ, որը մենք ցանկանում ենք ուղղահայաց դասավորել:

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

տարր {
	justify-self: start | center | end;
}

Արժեքներ

Արժեք	Նկարագրություն
`flex-start`	Տարրը սեղմված է հորիզոնական առանցքի սկզբին:
`flex-end`	Տարրը սեղմված է հորիզոնական առանցքի վերջին:
`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 {
	justify-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 {
	justify-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 {
	justify-self: end;
}

Տես նաև

place-self հատկությունը,
որը սահմանում է ցանցում առանձին տարրի ուղղահայաց դասավորությունը
align-self հատկությունը,
որը սահմանում է մեկ բլոկի ուղղահայաց դասավորությունը