ჩამონაშვერები ფლექსბოქსების მეშვეობით CSS-ში, ბლოკების ავტომატური სიგანით

დავუშვათ, გვაქვს ბადე ოთხი ბლოკით ზედიზედ:

.child {
	width: 25%;
}

მოდით, დავამატოთ ჩვენს ბლოკებს ჩამონაშვერები პროცენტებში ჰორიზონტალურად და ვერტიკალურად:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

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

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

1.5% * 3 / 4 = 1.125

მაშინ თითოეული ბლოკის სიგანე იქნება:

25% - 1.5% * 3 / 4 = 23.875%

მივიღებთ შემდეგ კოდს:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

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

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

ბლოკის სიგანეც დავუტოვოთ გამოთვლა calc ფუნქციას:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

მიუთითეთ ბლოკებს სიგანე პროცენტებში ისე, რომ ბადეში სამი ბლოკი განლაგდეს ზედიზედ, მათ შორის კი მანძილი იყოს 3%.

მიუთითეთ ბლოკებს სიგანე პროცენტებში ისე, რომ ბადეში ექვსი ბლოკი განლაგდეს ზედიზედ, მათ შორის კი მანძილი იყოს 0.5%.

მიუთითეთ ბლოკებს სიგანე პროცენტებში ისე, რომ ბადეში ოთხი ბლოკი განლაგდეს ზედიზედ, ბლოკებს შორის კი მანძილი იყოს 30px.

მიუთითეთ ბლოკებს სიგანე პროცენტებში ისე, რომ ბადეში ხუთი ბლოკი განლაგდეს ზედიზედ, ბლოკებს შორის კი მანძილი იყოს 50px.