თვისება align-content

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

სინტაქსი

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

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

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

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

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

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

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

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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 კონტეინერის ღერძების მიმართულებას
თვისება justify-content,
რომელიც აკონტროლებს გასწორებას მთავარი ღერძის მიმართ
თვისება align-items,
რომელიც აკონტროლებს გასწორებას განივი ღერძის მიმართ
თვისება flex-wrap,
რომელიც აკონტროლებს flex კონტეინერების მრავალსტრიქონიანობას
თვისება flex-flow,
შემოკლება flex-direction-ისა და flex-wrap-ისთვის
თვისება order,
რომელიც ადგენს flex ელემენტების თანმიმდევრობას
თვისება align-self,
რომელიც აკონტროლებს ერთი ელემენტის გასწორებას
თვისება place-content,
რომელიც აკონტროლებს გასწორებას მთავარი და განივი ღერძების მიმართ