CSS-es autómatikus szélességű csempe elrendezés

Az előző leckében a csempe elrendezésünknél az volt a helyzet, hogy az elemek szélességének és a térközeiknek összege kellett, hogy adja a szülő szélességét. Ez egy kicsit nem univerzális. Csináljuk meg úgy, hogy az elemek automatikusan alkalmazkodjanak a szülő szélességéhez.

Tegyük fel, hogy van egy ilyen szülőnk:

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

Tegyük fel, hogy a csempe elemei 4 blokkot soronként tartalmaznak:

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

Állítsuk be a blokkjaink szélességét úgy, hogy mindegyik közülük a szülő negyedét foglalja el. Ehhez állítsuk a méretüket 25%-ra:

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

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként három blokk legyen.

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként két blokk legyen.

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként egy blokk legyen.