7. Flexbox-Layouts

Flexbox macht es einfach, Elemente nebeneinander anzuordnen und Abstände automatisch zu verteilen.

.container {
  display: flex;
  justify-content: space-around;
}

7. Flexbox

Flexbox ist wie ein Zauberstab für das Anordnen von Elementen. Bevor es Flexbox gab, war es extrem kompliziert, Dinge nebeneinander zu stellen oder perfekt in die Mitte zu schieben. Entwickler mussten oft mit komplizierten Rechnungen und Tricks arbeiten, die oft kaputtgingen. Mit Flexbox ist das vorbei. Du nimmst einfach einen Container (zum Beispiel ein div) und sagst ihm: "display: flex;". Sofort werden alle Elemente darin zu kleinen "flexiblen" Objekten. Du kannst dann mit ganz einfachen Befehlen sagen: "Verteile alle Elemente mit dem gleichen Abstand dazwischen" oder "Rücke alles genau in die Mitte, egal wie groß der Bildschirm ist". Das Geniale ist, dass die Elemente sich anpassen. Wenn der Platz auf dem Bildschirm weniger wird, können sie schrumpfen oder in die nächste Zeile rutschen. Flexbox denkt quasi für dich mit. Es ist perfekt für Menüs, wo die Links nebeneinander stehen sollen, oder für Bildergalerien. Man kann sich Flexbox wie ein elastisches Gummiband vorstellen, auf dem deine Elemente aufgereiht sind: Du kannst das Band ziehen, stauchen oder die Elemente darauf hin- und herschieben, und alles bleibt immer ordentlich ausgerichtet.