CSSда автоен блокларнинг кенглиги билан плитка

Олдинги дарста бизнинг плиткамизда элементларнинг кенглиги ва уларнинг ораликлари jамида ота-онанинг кенглигини берган бўлди. Бу бироз универсал эмас. Келинг, элементлар ота-онанинг кенглигига автоматник мослаша оладиган қилиб ясайлик.

Бизда мана бундай ота-она бор деб фараз қилайлик:

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

Блокларнинг кенглигини фоизларда ўрнатиб қўйингки, плиткада қаторга учта блок тура олсин.

Блокларнинг кенглигини фоизларда ўрнатиб қўйингки, плиткада қаторга иккита блок тура олсин.

Блокларнинг кенглигини фоизларда ўрнатиб қўйингки, плиткада қаторга битта блок тура олсин.