kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Flexbox: Mehrspaltige Liste von Boxen mit vertikal zentrierten Inhalten

Vertikales Zentrieren einerseits und gleich hohe Elemente andererseits stellten Webdesigner lange Zeit vor große Herausforderungen. Dank Flexbox gehört dies mittlerweile der Vergangenheit an. In diesem Beitrag archivieren wir ein häufig benötigtes Flexbox-Pattern in dem einige Teaser-Boxen mehrspaltig nebeneinander angezeigt werden sollen, sobald ausreichend Platz vorhanden ist. Innerhalb der einzelnen Box befindet sich in Icon und beschreibender Text unterschiedlicher Länge. Das Icon soll immer vertikal in der Mitte des Textes positioniert werden. Mit zwei verschachtelten Flexboxen kein großes Problem.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Flexbox-Grundlagen

Dieser Artikel setzt CSS Flexbox anhand eines konkreten Anwendungsfalls praktisch um. Es werden keine Grundlagen erklärt, da wir dazu bereits einen sehr ausführlichen Beitrag geschrieben haben.

Beispiel anschauen

HTML-Markup

Der Grundaufbau des Beispiels ist simpel. Innerhalb einer ungeordneten Liste <ul> stellt jeder Teaser ein <li>-Element dar. Innerhalb von <li> existiert ein Link <a> mit enthaltenem Text. Das Icon ist ein ::before-Element.

<ul class="teaser-list">
  <li class="teaser"><a href="#">TEXT</a></li>
  <li class="teaser"><a href="#">TEXT</a></li>
  <li class="teaser"><a href="#">TEXT</a></li> 
  …
</ul>

Icons vertikal neben Text zentrieren

Der Aufbau der Teaser-Boxen ist mit Flexbox einfach hergestellt. Jeder Link im  .teaser stellt eine Flexbox dar, in der die Elemente auf der Kreuzachse mittig positioniert werden.

Mit Flexbox gestalteter Teaser. Links das Icon, rechts der Text – alles vertikal zentriert
Einzelner Teaser mit vertikal zentrierten Inhalten
.teaser > a {
  display: flex;
  align-items: center;
  … 
}

Mehrspaltige Flexbox mit flex-wrap

Um das Verhalten des Layouts zu steuern, setzen wir flex-wrap auf dem Container-Element (.teaser-list) ein. Mit Hilfe zweier Breakpoints wechselt das Layout von einem einspaltigen zu einem zweispaltigen zu einem dreispaltigen Aufbau.

Auch die .teaser erhalten display: flex, damit nebeneinander liegende Boxen gleich hoch sind.

Mehrspaltiger Teaser-Aufbau
Aufbau der Haupt-Layouts auf großem Display
.teaser-list {
  display:flex;
  flex-wrap: wrap;
  …
}

.teaser {
  display: flex;
  width: 100%;
  …
}

@media screen and (min-width: 40em) {
  .teaser {
    width:50%;
  }
}

@media screen and (min-width: 75em) {
  .teaser {
    width:33.333%;
  }
}

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.