Плітачка з аўташырынёй блокаў у 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;
}

Задайце блокам шырыню ў працэнтах так, каб у плітачцы стала тры блока ў шэраг.

Задайце блокам шырыню ў працэнтах так, каб у плітачцы стало два блока ў шэраг.

Задайце блокам шырыню ў працэнтах так, каб у плітачцы стало па адным блоку ў шэраг.