Atsevišķa elementa izlīdzināšana pa CSS režģa horizontālo asi

Izlīdzināšanu pa horizontālo asi var iestatīt ne tikai vecāka elementā, bet arī katram pēctecim atsevišķi. Šim nolūkam tiek izmantota īpašība justify-self.

Pa horizontālās ass sākumu

Iestatī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);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: start;
}

Pa horizontālās ass centru

Iestatī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);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: center;
}

Pa horizontālās ass beigām

Iestatī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);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: end;
}

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no pieciem elementiem, kas izvietoti divās rindās. Veiciet otrā elementa izlīdzināšanu pa horizontālās ass sākumu.

Tagad izvietojiet režģa elementus trīs rindās un iestatiet trešā elementa izlīdzināšanu pa režģa horizontālās ass centru.

Mainiet iepriekšējo uzdevumu tā, lai piektā elementa izlīdzināšana notiktu pa horizontālās ass beigām.