Flīzes ar automātisko bloku platumu CSS

Iepriekšējā nodarbībā mūsu flīzēs izrādījās, ka elementu platums un to atstarpes kopā jādod vecāka elementa platums. Tas ir mazliet neuniversāli. Darīsim tā, lai elementi automātiski pielāgotos vecāka elementa platumam.

Pieņemsim, ka mums ir šāds vecāka elements:

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

Lai šīs flīzes elementi atrodas 4 blokos pēc kārtas:

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

Iestatīsim mūsu bloku platumu tā, lai katrs no tiem aizņemtu ceturtdaļu no vecāka elementa. Lai to izdarītu, iestatīsim to izmēru uz 25%:

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

Iestatiet blokiem platumu procentos tā, lai flīzē būtu trīs bloki pēc kārtas.

Iestatiet blokiem platumu procentos tā, lai flīzē būtu divi bloki pēc kārtas.

Iestatiet blokiem platumu procentos tā, lai flīzē būtu viens bloks pēc kārtas.