Ploščica s samodejno širino blokov v CSS

V prejšnji lekciji se je v naši ploščici izkazalo, da morata širina elementov in njihovi odmiki skupaj dati širino starša. To ni ravno univerzalno. Naredimo tako, da se elementi samodejno prilagajajo širini starša.

Recimo, da imamo takšnega starša:

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

Naj bodo elementi te ploščice postavljeni po 4 bloka v vrsto:

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

Nastavimo širino naših blokov tako, da vsak od njih zasede četrtino starša. Za to nastavimo njihovo velikost na 25%:

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

Nastavite blokom širino v odstotkih tako, da bo v ploščici tri bloke v vrsti.

Nastavite blokom širino v odstotkih tako, da bo v ploščici dva bloka v vrsti.

Nastavite blokom širino v odstotkih tako, da bo v ploščici po en blok v vrsti.