CSS'те автоен блогдордун плиточкасы

Акыркы сабакта биздин плиточкабызда элементтердин жана алардын аралыктарынын тутуму ата-энесинин тутумуна барабар болушу керек болчу. Бул бир аз универсалдуу эмес. Келгиле, элементтер ата-энесинин тутумуна автоматтык түрдө ылайыкташышы үчүн кылалы.

Бизде төмөнкүдөй ата-эне бар дейли:

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

Бул плиточканын элементтери катарда 4 блоктон турарын коёлу:

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

Биздин блоктордун тутумун алардын ар бири ата-энесинин төрттөн бир бөлүгүн ээлеши үчүн коёлу. Бул үчүн алардын өлчөмүн 25% кылалы:

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

Блокторго пайыздар менен тутум берип, плиткада үч блок катар келгендей кылыңыз.

Блокторго пайыздар менен тутум берип, плиткада эки блок катар келгендей кылыңыз.

Блокторго пайыздар менен тутум берип, плиткада бирден блок катар келгендей кылыңыз.