თვისება justify-content

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

სინტაქსი

სელექტორი {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

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

მნიშვნელობა	აღწერა
`flex-start`	ბლოკები მიბმულია მთავარი (ჰორიზონტალური) ღერძის დასაწყისში.
`flex-end`	ბლოკები მიბმულია მთავარი (ჰორიზონტალური) ღერძის დასასრულში.
`center`	ბლოკები განლაგებულია მთავარი (ჰორიზონტალური) ღერძის ცენტრში.
`space-between`	ბლოკები განაწილებულია მთავარი (ჰორიზონტალური) ღერძის გასწვრივ, რომლის დროსაც პირველი ელემენტი მიბმულია ღერძის დასაწყისში, ხოლო ბოლო - დასასრულში.
`space-around`	ბლოკები განაწილებულია მთავარი (ჰორიზონტალური) ღერძის გასწვრივ, რომლის დროსაც პირველ ბლოკსა და ღერძის დასაწყისს შორის, ბოლო ბლოკსა და ღერძის დასასრულს შორის იგივე დაშორებაა, რაც სხვა ბლოკებს შორის. თუმცა, ისინი არ არის ტოლი, როგორც შეიძლება ჩანდეს: დაშორებები ჯამდება და ორ ბლოკს შორის მანძილი ორჯერ მეტია, ვიდრე ბლოკსა და ღერძის დასაწყის/დასასრულს შორის.

ნაგულისხმევი მნიშვნელობა: flex-start.

მაგალითი . მნიშვნელობა flex-start

ამჟამად ღერძი მიმართულია მარცხნიდან მარჯვნივ (ეს კეთდება flex-direction: row-ის მიერ), ხოლო ბლოკები მიბმულია მარცხენა მხარეს:

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

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი . მნიშვნელობა flex-end

ამ მაგალითში ღერძი ასევე მიმართულია მარცხნიდან მარჯვნივ, მაგრამ ბლოკები მიბმულია მარჯვენა მხარეს, რადგან justify-content დაყენებულია მნიშვნელობაზე flex-end:

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

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი . მნიშვნელობა center

ამჟამად ბლოკები განლაგდებიან ცენტრში მთავარი ღერძის მიმართულების მიუხედავად:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი . მნიშვნელობა space-between

ბლოკები განაწილებულია მთავარი ღერძის გასწვრივ, რომლის დროსაც პირველი ელემენტი მიბმულია ღერძის დასაწყისში, ხოლო ბოლო - დასასრულში:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი . მნიშვნელობა space-around

ბლოკები განაწილებულია მთავარი ღერძის გასწვრივ, რომლის დროსაც პირველ ბლოკსა და ღერძის დასაწყისს, ბოლო ბლოკსა და ღერძის დასასრულს შორის იგივე დაშორებაა, რაც სხვა ბლოკებს შორის. თუმცა, დაშორებები ჯამდება და ორ ბლოკს შორის მანძილი ორჯერ მეტია, ვიდრე ბლოკსა და ღერძის დასაწყის/დასასრულს შორის:

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

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი . მნიშვნელობა center. ღერძი ქვემოთ

შევცვალოთ მთავარი ღერძის მიმართულება, flex-direction-ის მნიშვნელობაზე column-ის დაყენებით:

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

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

მაგალითი . მნიშვნელობა space-between. ღერძი ქვემოთ

ამჟამად ბლოკები განაწილდებიან თანაბრად ვერტიკალურად:

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

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	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-content: start;
	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-content: 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-content: 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;
}

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

თვისება flex-direction,
რომელიც ადგენს flex კონტეინერის ღერძების მიმართულებას
თვისება align-items,
რომელიც აკონტროლებს გასწორებას ჯვარედინი ღერძის მიმართ
თვისება flex-wrap,
რომელიც აკონტროლებს flex კონტეინერის მრავალსტრიქონიანობას
თვისება flex-flow,
შემოკლება flex-direction-ისა და flex-wrap-ისთვის
თვისება order,
რომელიც ადგენს flex ელემენტების თანმიმდევრობას
თვისება align-self,
რომელიც აკონტროლებს ერთი ელემენტის გასწორებას
თვისება flex-basis,
რომელიც ადგენს კონკრეტული flex ელემენტის ზომას
თვისება flex-grow,
რომელიც აკონტროლებს flex ელემენტების "მოწევას"
თვისება flex-shrink,
რომელიც აკონტროლებს flex ელემენტების შეკუმშვას
თვისება flex,
შემოკლება flex-grow-ის, flex-shrink-ის და flex-basis-ისთვის