Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Webdesign Karlsruhe
    schrieb am 04.03.2019 um 00:57 Uhr:

    Guter Beitrag zum Flex System. Mit dem CSS Befehl flex-shrink:0;width:100px; kann man zusätzlich noch sagen, dass die Box nicht kleiner werden darf wie die festgelegte Breite. Mit dem Gegenbeispiel flex-grow:0;width:100px; definiert man, dass die Box nicht größter werden darf als 100 Pixel.

    Das Flex System ist wahrlich eine Bereicherung für alle Entwickler die nicht die Steinzeit Browser unterstützen

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →