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;
}