Eienskap justify-items

Die eienskap justify-items stel die horisontale belyning van elemente binne 'n rooster se selle. Die belyning is die duidelikste wanneer jy die rooster in die blaaier se ontfoutings hulpmiddel besigtig. Word op die ouer element toegepas.

Sintaksis

selekteerder {
	justify-items: flex-start | flex-end | center ;
}

Waardes

Waarde	Beskrywing
`flex-start`	Elemente is teen die begin van die horisontale as gedruk.
`flex-end`	Blokke is teen die einde van die horisontale as gedruk.
`center`	Blokke is in die middel van die horisontale as.

Voorbeeld . Belyning teen die begin van die horisontale as

Kom ons belyn ons elemente binne die selle teen die begin van die horisontale as:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

En nou kyk ons na ons rooster in die ontfoutings hulpmiddel:

Voorbeeld . Belyning in die middel van die horisontale as

Kom ons belyn ons elemente in die selle in die middel van die horisontale as:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	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;
}

Deur die blaaier se ontfoutings hulpmiddel aan te sluit, sal ons ons rooster sien:

Voorbeeld . Belyning teen die einde van die horisontale as

Kom ons belyn ons elemente teen die einde van die horisontale as:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: end;
	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;
}

Nou kyk ons na die rooster deur die ontfoutings hulpmiddel:

Sien ook

die eienskap align-items,
wat die belyning op die dwarss stel
die eienskap place-items,
wat die belyning van elemente binne rooster se selle stel