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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.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;
}

Результат: