Īpašība justify-self

Īpašība justify-self nosaka atsevišķa elementa izlīdzināšanu gridā pa horizontālo asi. Īpašība tiek piemērota tajā elementā, kuru mēs vēlamies izlīdzināt.

Sintakse

elements {
	justify-self: start | center | end;
}

Vērtības

Vērtība	Apraksts
`flex-start`	Elements ir piespiests pie horizontālās ass sākuma.
`flex-end`	Elements ir piespiests pie horizontālās ass beigām.
`center`	Elements ir izlīdzināts horizontālās ass centrā.

Piemērs . Izlīdzināšana pa horizontālās ass sākumu

Uzstādīsim mūsu pirmā elementa izlīdzināšanu pa horizontālās ass sākumu:

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

Piemērs . Izlīdzināšana pa horizontālās ass centru

Uzstādīsim pirmā elementa izlīdzināšanu pa horizontālās ass centru:

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

Piemērs . Izlīdzināšana pa horizontālās ass beigām

Uzstādīsim pirmā elementa izlīdzināšanu pa horizontālās ass beigām:

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

Skatiet arī

īpašība place-self,
kura nosaka atsevišķa elementa izlīdzināšanu gridā
īpašība align-self,
kura nosaka viena bloka izlīdzināšanu