CSS-ში ფლექსბოქსებთან მუშაობა

როგორც იცით, არსებობს justify-content თვისება, რომელიც ალაგებს ელემენტებს მთავარი ღერძის მიმართ.

ასევე არსებობს align-items თვისება, რომელიც ალაგებს ელემენტებს განივი ღერძის მიმართ. მოდით ცოტა ვითამაშოთ მასთან.

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

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

მოდით ახლა დავამატოთ მეტი ბლოკი, დავამატოთ მრავალსტრიქონიანობა flex-wrap-ის გამოყენებით, გავზარდოთ მშობლის სიმაღლე 300px-დან 500px-მდე და ვნახოთ, როგორ იმუშავებს align-items ამ მრავალსტრიქონიან შემთხვევაში:

<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;
	align-items: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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

ამისთვის უნდა გამოვიყენოთ align-content თვისება, რომელიც საჭიროა მრავალსტრიქონიანი ტექსტისთვის. გადავწეროთ ჩვენი კოდი:

<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;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

align-content თვისება იღებს იგივე მნიშვნელობებს, რასაც align-items.

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

მოდით მაგალითისთვის ვნახოთ space-between მნიშვნელობა. დავაყენოთ მშობელს სიმაღლე 320px-ზე. ვინაიდან ჩვენ გვაქვს სამი რიგი, და შესაბამისად ორი მანძილი რიგებს შორის, მაშინ ეს მანძილები თითოეული იქნება 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;
	align-content: space-between;
	flex-wrap: wrap;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

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

მოდით ვცადოთ stretch მნიშვნელობა. ამისთვის მოვაშოროთ სიმაღლე შვილებს, ხოლო მშობელს სიმაღლე დავაყენოთ 600px-ზე უფრო აშკარა ეფექტის მისაღწევად.

<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;
	align-content: stretch;
	flex-wrap: wrap;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

stretch მნიშვნელობა align-content-ისთვის არის ნაგულისხმევი მნიშვნელობა. თუ ჩვენ მოვაშორებთ სიმაღლეს შვილებს სრულიად, მოვაშორებთ align-content თვისებას, მაგრამ დავტოვებთ მშობლის სიმაღლეს და flex-wrap - ყველაფერი იმუშავებს ანალოგიურად:

<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;
	flex-wrap: wrap;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

ხოლო თუ მოვაშორებთ აგრეთვე flex-wrap-ს - ყველაფერი გახდება ერთსტრიქონიანი:

<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;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

შევაბრუნოთ ღერძი

<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: column;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

<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: column;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

<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: column;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

განსაკუთრებული პირობები

flex-wrap: wrap-ის გარეშე არაფერი მუშაობს, დავუშვათ ჩვენ გვაქვს ერთი ხაზი:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

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

მოვაშოროთ flex-wrap: wrap - align-content: center შეწყვეტს მუშაობას:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

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