ფლექსებზე აგურის განლაგება CSS-ში

ახლა მოდით ვისწავლოთ თუ როგორ გავაკეთოთ აგურის განლაგება ფლექსბოქსებზე. დასაწყისისთვის, მოდით დავალაგოთ ფლექს-ბლოკები რამდენიმე რიგში, სამი ბლოკი თითო რიგში.

ამისთვის ფლექსების მშობელს დავაყენებთ სიგანეს 300px-ზე და flex-wrap-ის მნიშვნელობას wrap-ზე, ხოლო შვილებს - სიგანეს 100px-ზე:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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

რადგან ჩვენ გვაქვს სამი ბლოკი რიგში, გამოდის, რომ მათ შორის არის ორი შუალედი. დავუშვათ, ჩვენ გვსურს, რომ თითოეულ შუალედს ჰქონდეს სიგანე 10px. გამოვა, რომ მშობლის სიგანე საჭიროა გავზარდოთ 20px-ით, ანუ გავაკეთოთ არა 300px, არამედ 320px.

ახლა მოდით ბლოკების მშობელს მივანიჭოთ justify-content-ის მნიშვნელობა space-between-ზე და მივიღოთ სასურველი მანძილი ბლოკებს შორის:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ახლა მოდით დავამატოთ იგივე მანძილი ბლოკებს შორის ვერტიკალურადაც. ამისთვის შესაძლებელია მივანიჭოთ თვისება align-content-ს მნიშვნელობა space-between-ზე.

ამისთვის, თუმცა, საჭიროა მივანიჭოთ სიმაღლე მშობელს, წინააღმდეგ შემთხვევაში align-content არ იმუშავებს. მოდით დავაყენოთ სიმაღლე 320px-ზე. ამ შემთხვევაში ჩვენში ზუსტად მოთავსდება სამი რიგი ბლოკი 100px სიმაღლის პლუს ორი ზღვარი რიგებს შორის 10px-ით.

მოდით გავუშვათ:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ყველაფერი მშვენივრად მუშაობს, მაგრამ არსებობს რამდენიმე პრობლემა, რომელსაც ჩვენ განვიხილავთ შემდეგ გაკვეთილზე.