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

Ба блокҳо паҳноии фоизӣ гузоред, то ки дар плитка дар як сафр се блок шавад.

Ба блокҳо паҳноии фоизӣ гузоред, то ки дар плитка дар як сафр ду блок шавад.

Ба блокҳо паҳноии фоизӣ гузоред, то ки дар плитка дар як сафр як блок шавад.