Flexbox: Mehrspaltige Liste von Boxen mit vertikal zentrierten Inhalten

Von Jonas

In diesem Beitrag erklären wir wir mit Flexbox mehrspaltige Liste von Boxen mit vertikal zentrierten Inhalten erstellt werden können.

Aktualisiert am 10. März 2016 Ein Kommentar

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.

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.

.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.

.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

Geschrieben von Jonas

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing