CSS-ში ფლექსებზე აგურის ფორმატის პრობლემები

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

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

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

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

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

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

მოცემულია 12 ელემენტი. გააკეთეთ მათგან აგურის ფორმატი 4 ელემენტის მიხედვით რიგში, თითოეული ელემენტის სიგანით 100px და მათ შორის მანძილით 20px.

მოცემულია 12 ელემენტი. გააკეთეთ მათგან აგურის ფორმატი 3 ელემენტის მიხედვით რიგში, თითოეული ელემენტის სიგანით 150px და მათ შორის მანძილით 10px.