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

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

css.child {
  width: 25%;
}

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

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

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

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

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

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

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

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

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

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

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