თვისება justify-items

თვისება justify-items აკონტროლებს ელემენტების ჰორიზონტალური ღერძის მიმართ გასწორებას ბადის უჯრებში. გასწორება ყველაზე ნათლად შეიმჩნევა ბრაუზერის დებაგერის საშუალებით ბადის დათვალიერებისას. ეხება მშობელ ელემენტს.

სინტაქსი

სელექტორი {
	justify-items: flex-start | flex-end | center ;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`flex-start`	ელემენტები მიბმულია ჰორიზონტალური ღერძის დასაწყისზე.
`flex-end`	ბლოკები მიბმულია ჰორიზონტალური ღერძის ბოლოში.
`center`	ბლოკები განლაგებულია ჰორიზონტალური ღერძის ცენტრში.

მაგალითი . გასწორება ჰორიზონტალური ღერძის დასაწყისის მიმართ

მოდით, გავასწოროთ ჩვენი ელემენტები უჯრებში ჰორიზონტალური ღერძის დასაწყისის მიმართ:

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

ახლა კი შევხედოთ ჩვენს ბადს დებაგერში:

მაგალითი . გასწორება ჰორიზონტალური ღერძის ცენტრთან

მოდით, გავასწოროთ ჩვენი ელემენტები უჯრებში ჰორიზონტალური ღერძის ცენტრთან:

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

ბრაუზერის დებაგერის შეერთებით ჩვენ დავინახავთ ჩვენს ბადს:

მაგალითი . გასწორება ჰორიზონტალური ღერძის ბოლოსთან

მოდით, გავასწოროთ ჩვენი ელემენტები ჰორიზონტალური ღერძის ბოლოსთან:

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

ახლა შევხედოთ ბადს დებაგერის საშუალებით:

იხილეთ აგრეთვე

თვისება align-items,
რომელიც აკონტროლებს გასწორებას ღერძზე კვეთის მიმართულებით
თვისება place-items,
რომელიც აკონტროლებს ელემენტების გასწორებას ბადის უჯრებში