CSS-ში ავტომატური სიგანის მქონე ბლოკების ბადე

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

დავუშვათ, გვაქვს ასეთი მშობელი ელემენტი:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

დავუშვათ, ამ ბადის ელემენტები დგანან რიგში 4 ბლოკის ოდენობით:

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

მივანიჭოთ ჩვენი ბლოკების სიგანე ისე, რომ თითოეული მათგანი დაიკავოს მშობელის მეოთხედი. ამისთვის დავაყენოთ მათი ზომა 25%-ზე:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

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

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

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