CSS-də avtogenişlikli bloklar ilə plitə düzəni

Əvvəlki dərsdə bizim plitə düzənimizdə elementlərin eni və onların boşluqlarının cəmi valideynin eninə bərabər olmalı idi. Bu bir qədər universal deyil. Gəlin edək ki, elementlər valideynin eninə avtomatik uyğunlaşsın.

Tutaq ki, bizim belə bir valideynimiz var:

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

Tutaq ki, bu plitə düzəninin elementləri sırada 4 blok durur:

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

Gəlin bloklarımızın enini elə təyin edək ki, hər biri valideynin dörddə birini tutsun. Bunun üçün onların ölçüsünü 25% təyin edək:

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