CSS Tricks: 3 DIVs zentriert nebeneinander anzeigen – ohne float!

Mit float lassen sich mit CSS mehrere Elemente nebeneinander anzeigen: Reicht der Platz aus, wird ein “float:left” Element neben einem anderen Element mit der Eigenschaft “float:left” angezeigt. Trotzdem ist es nicht ganz einfach, verschiedene floating-Elemente zu platzieren – vor allem, wenn sie auch noch zentriert werden sollen.

display: flex – DIVs flexibel und zentriert nebeneinander

Die neue CSS Eigenschaft “display: flex” hilft hier aus, sie wird mittlerweile auf allen großen Browsers unterstützt. Statt einem “flot:left” und “text-align:center” reicht ein einfaches DIV Element, das das CSS Attribut “display: flex” erhält: Die Elemente in diesem ersten DIV werden dann automatisch zentriert und nebeneinander angezeigt – und das funktioniert auch für responsive design, wenn man das Browserfenster zusammenschiebt!

 
display:flex Beispiel-Code:

<style>
#aussendiv { display: flex; }
.innendiv { width:150px; }
</style>

<div id="aussendiv">
  <div class="innendiv">Eins</div>
  <div class="innendiv">Zwei</div>
  <div class="innendiv">Drei</div>
</div>

 
Hier wird ein äußeres DIV Element mit drei weiteren DIVs gefüllt, die die Texte “Eins”, “Zwei” und “Drei” enthalten. Ohne die “float” Eigenschaften werden die inneren DIVs aber automatisch nebeneinander angezeigt:

display:flex; justify-content:space-between;

Damit die inneren DIVs jetzt auch zentriert werden, braucht der äußere Container neben “display:flex” noch den Wert “justify-content:space-between;”. Dies sorgt dafür, dass das linke Element ganz links, das rechte Element ganz rechts und das mittlere Element zentriert angezeigt wird:

display:flex; justify-content:center;

Wenn alle drei direkt nebeneinander, aber mittig und zentriert platziert werden sollen, bräuchte man stattdessen den Wert “justify-content:center;”.