Flex-Elemente in CSS
Neben den von uns gelernten Typen von Blockmodellen
gibt es noch ein weiteres - Flex-Elemente. Um
solche Elemente zu erhalten, muss man dem Elternelement
dieser Elemente die Eigenschaft display
mit dem Wert flex zuweisen. Das Elternelement selbst bleibt
ein Blockelement, aber seine Nachfahren werden
zu Flex-Elementen.
Flex-Elemente können, ähnlich wie Blockelemente,
Breite und Höhe, margin und padding haben.
Im Gegensatz zu Blockelementen werden jedoch
Flex-Elemente standardmäßig in einer Reihe innerhalb
ihres Elternelements angeordnet.
Versuchen wir es:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* Nachfahren werden Flex-Elemente sein */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
