Kacheln mit automatischer Blockbreite in CSS

In der vorherigen Lektion war es in unserer Kachelanordnung so, dass die Breite der Elemente und ihrer Abstände in der Summe die Breite des Elternelements ergeben musste. Das ist nicht ganz universell. Lassen Sie uns das so machen, dass sich die Elemente automatisch an die Breite des Elternelements anpassen.

Nehmen wir an, wir haben diesen Elternteil:

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

Nehmen wir an, die Elemente dieser Kachelanordnung stehen in 4 Blöcken pro Reihe:

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

Lassen Sie uns die Breite unserer Blöcke so festlegen, dass jeder von ihnen ein Viertel des Elternelements einnimmt. Dazu setzen wir ihre Größe auf 25%:

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

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass die Kachelanordnung drei Blöcke pro Reihe hat.

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass die Kachelanordnung zwei Blöcke pro Reihe hat.

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass die Kachelanordnung einen Block pro Reihe hat.