Плітачка з аўташырынёй блокаў у CSS

У папярэднім уроке ў нашай плітачцы атрымлівалася так, што шырыня элементаў і іх водступаў у суме павінна была даваць шырыню бацькі. Гэта крыху не ўніверсальна. Давайце зробім так, каб элементы аўтаматычна падстройваліся пад шырыню бацькі.

Хай у нас ёсць вось такі бацька:

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

Хай элементы гэтай плітачкі стаяць па 4 блока ў шэраг:

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

Зададзім шырыню нашых блокаў так, каб кожны з іх займаў чвэрць бацькі. Для гэтага поставім іх памер у 25%:

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