Horizontales und vertikales Zentrieren von und in Blockelementen mit display:flex

display:flex verspricht vielen Problemen in der alltäglichen Webentwicklung ein Ende zu bereiten. Man fragt sich, warum es das nicht schon viel früher gab.

Vertikales Zentrieren mit display:flex

Immer wieder sieht man sich vor die Herausforderung gestellt, innerhalb von Blockelementen vertikal zu zentrieren. Das ging früher in Tabellenzellen mit vertical-align:middle;, später kam display:table-cell dazu, womit das align:middle auch auf Nicht-Tabellenzellen anwendbar war (vgl. dieser Beitrag).

Jetzt, mit display:flex wird das einfacher und schöner.
Beispiel 1

Folgendes CSS machts möglich:

#wrap {
  display:flex;
  align-items: center;
}

Mit diesen Angaben im übergeordneten Container #wrap erreicht man das erste Ziel. Die horizontale Zentrierung geschieht traditionell mit Hilfe von text-align:center; im darunter liegenden Container.

Horizontales Zentrieren mit display:flex

Analog zum obigen Beispiel, mit einer kleinen Änderung:

#wrap {
  display:flex;
  justify-content: center;
}

Vertikales Zentrieren von mehreren, nebeneinander stehenden Blockelementen

Das ist damit gemeint:
Beispiel 2

Üblicherweise wird etwas in dieser Art bei Menüs benötigt. li Elemente sind bekanntermaßen Blockelemente, die man mit float:left in eine Reihe bekommt. Dann allerdings wird die Zentrierung innerhalb eines Elementes quasi unmöglich. display:flex schafft Abhilfe (hier werden <p> Elemente verwendet, das spielt aber keine Rolle):

#wrap {
  width:640px;
  height:150px;
  margin:0 auto;
  display:flex;
  justify-content: center;
  border:1px solid #ccc;
}
#middlediv {
  display:flex;
  align-items:center;
}
#middlediv p {
  padding:10px 30px;
  margin:0 auto;
  background:#ccc;
  margin:0 5px;
}

Flächenfüllendes Zentrieren mit display:flex

Noch besser wird es, wenn man den einzelnen Elementen nicht ein padding geben will (muss), sondern den gesamten vorhandenen Platz füllen will (muss), so dass sich das padding entsprechend anpasst. Auch das ist mit display:flex möglich:
Beispiel 3

Hier kommt die CSS Eigenschaft flex-grow zum Einsatz:

#wrap {
  width:840px;
  height:150px;
  margin:0 auto;
  display:flex;
  border:1px solid #ccc;
  padding:0 5px;
}
#middlediv {
  display:flex;
  margin:auto;
  flex-grow: 1;
}
#middlediv p {
  padding:10px 0;
  margin:0 auto;
  background:#ccc;
  margin:0 5px;
  flex-grow: 1;
  text-align:center;
}

Einen unten bündigen Footer mit display:flex realisieren

Eine immer wiederkehrende Anforderung ist ein unten bündiger Footer. Früher eher kompliziert geht das heute dank display:flex relativ einfach. Gesetzt man hat folgendes HTML:

<body>
  <div id="all">
    <div class="main-container">            
      main-container
    </div> 
    <div class="footer-container">
      footer-container
    </div>
  </div>
</body>

Um den footer-container nach unten zu bekommen, verwende man dieses CSS:

body, html {
  height: 100%;
  padding:0;
  margin:0
}
#all {
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 100%;
}
.main-container {
  flex: 1;
}
.footer-container {
  flex: 0;
}

Beispiel 4

Reihenfolge der divs mit display:flex ändern

Angenommen, man hat 3 divs, die per float nebeneinander stehen, #links, #mitte, #rechts.
Nun möchte man, dass in der mobilen Version, bei der alle untereinander stehen, die „natürliche“ Reihenfolge geändert wird, dass also z.B. oben der div#rechts, darunter der div#mitte und ganz unten der div#links angezeigt wird. Um das mit display:flex zu erreichen, setze man zunächst alle drei divs in einen übergeordneten, z.B. div.flexcontainer.
Mit folgendem CSS erreicht man das Gewünschte:

@media (max-width: 767px) {
  .flexcontainer {
    display: flex;
    flex-direction: column;
  }
  #mitte {
    order:1;
  }
  #rechts {
    order:2;
  }
  #links {
    order:3;
  }
}

Das sind nur wenige Beispiele, was mit display:flex möglich ist. Für mehr Infos zur Browserunterstützung (im Prinzip alle und der IE ab Version 10) und überhaupt bitte folgende Links kontaktieren:
https://github.com/philipwalton/solved-by-flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/