ადაპტიური ფილები უფსკრულიების გარეშე CSS-ში

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

ჯერ დავწეროთ HTML კოდი:

<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 class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

ახლა მოდით დავამატოთ სტილები ბლოკების მშობელს:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

ახლა დავაყენოთ სტილები თავად ბლოკებს, მათ სიგანეს არ დავაყენოთ:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

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

მოდით დავწეროთ კოდი, რომელიც დასვამს ოთხ ბლოკს რიგში:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

ახლა კი დავსვათ სამი ბლოკი რიგში:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

ახლა კი დავსვათ ორი ბლოკი რიგში:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

ერთი ბლოკი რიგში:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

მოდით შევკრიბოთ მთელი კოდი ერთად:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

გადააკეთეთ ჩემი კოდი ისე, რომ ბლოკების სიგანე გამოითვალოს calc ფუნქციის მეშვეობით.

გააკეთეთ ფილების განლაგება, რომელიც ეკრანის შევიწროვებისას თავდაპირველად იქნება ოთხი ელემენტი რიგში, შემდეგ ორი ელემენტი რიგში, და შემდეგ ერთი ელემენტი რიგში.

გააკეთეთ ფილების განლაგება, რომელიც ეკრანის შევიწროვებისას თავდაპირველად იქნება ექვსი ელემენტი რიგში, შემდეგ სამი ელემენტი რიგში, და შემდეგ ერთი ელემენტი რიგში.