Boxen mit Flex auf gleiche Höhe bringen
Beitrag vom
Boxen mit gleicher Höhe nebeneinander zu platzieren war bisher immer mit viel Kopfschmerzen verbunden. Entweder versucht man, den Content zu limitieren und die Boxen groß genug zu gestalten oder man sucht mit Javascript die größte Box und füllt die Anderen entsprechend auf. Auf jeden Fall war dieses Thema bisher immer nur unelegant zu lösen. Die Wunderwaffe von CSS3 heist Flex.
Als Grundlage dienen 6 Boxen in einem Container. Die Inhalte der Boxen sollen unterschiedlich lang sein. Das Ziel ist, dass in einem mittleren Viewport 2 nebeneinander und in einem großen Viewport 3 nebeneinander stehen und die gleiche Höhe einnehmen. Aber erst einmal das Markup:
<div class="container">
<div class="box">
<div class="content">
<h3>Headline</h3>
<p><img src="http://www.placecage.com/c/600/600"></p>
<p>Donec gravida posuere arcu.</p>
<a href="#">Mehr erfahren</a>
</div>
</div>
<div class="box">
<div class="content">
<h3>Headline</h3>
<p> Nulla facilisi. Phasellus imperdiet. ...</p>
<a href="#">Mehr erfahren</a>
</div>
</div>
<div class="box">
<div class="content">
<h3>Headline</h3>
<p>Praesent libero. Morbi pellentesque libero...</p>
<a href="#">Mehr erfahren</a>
</div>
</div>
...
</div>
Für ein bisschen Grundstyling nutze ich folgendes CSS.
* {
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
}
.container{
background: #ccc;
}
.box{
padding: 5px;
border-radius: 3px;
}
.content{
background: #eee;
padding: 5px;
}
display: flex; versucht, den verfügbaren Platz auf alle direkten Kind-Elemente zu verteilen. Via flex-wrap: wrap; erlauben wir, die Zeile umzubrechen, wenn der Platz zu eng wird. Der Container, auf dem Flex angewendet wird, nimmt dabei die komplett verfügbare Höhe in Anspruch.
Da wir in der kleinen Ansicht alle Boxen untereinander anzeigen wollen, müssen wir eine Breite von 100% erzwingen. Für die mittlere und große Ansicht sollen 2 bzw. 3 Boxen nebeneinander stehen. Also setzen wir die Box-Breite auf 50% bzw 33.33333%.
.container{
display: flex;
flex-wrap: wrap;
}
.box{
width: 100%;
}
@media screen and (min-width: 400px){
.box{
width: 50%;
}
}
@media screen and (min-width: 700px){
.box{
width: 33.333333333%;
}
}
So weit so gut:
Der Platz wird jetzt schön gleichmäßg auf alle Boxen aufgeteilt. Ab einer Breite von 480px sitzen 2 Boxen und ab 700px sitzen 3 Boxen nebeneinander. Boxen in einer Reihe sind nach oben bündig.
Die Boxen sitzen jetzt in jeder Zeile bündig nebeneinander. Nach unten flattern sie allerdings noch sehr unschön. Das ist zumindest schon einmal die halbe Miete.
Wir erinnern uns, dass Flexboxen die komplett verfügbare Höhe einnehmen, allright?! Die Höhe einer Zeile ist durch das größte Element in einer Zeile bestimmt.
Wenn wir jetzt A und B kombinieren und display: flex; auf die Boxen anwenden, sollten alle Elemente in einer Zeile gleich hoch werden.
Also:
.box{
display: flex;
}
Das Ergebnis kann sich jetzt langsam sehen lassen.
Flexbox wird von den meisten Browsern schon unterstützt. Für Android 4.3 und IE10 müssen auf jeden Fall noch Vendor Prefixes gesetzt werden. Außerdem sprechen sie nur die „alte Syntax“. IE 9 und jünger beherrschen Flexbox gar nicht.
Mehr dazu unter http://caniuse.com/#search=flex
Um die alten Internet Explorer 8 und 9 mit zu nehmen, klingt flexibility.js vielversprechend.
Da die „alten“ mit der Zeit weiter aussterben und CSS3 so langsam wirklich überall sauber interpretiert wird, wird Flex hoffentlich schon bald lästige Floats und Equal-Height-Scripts ersetzen.
See the Pen Equal Flex by Kai Brockelt (@donkaisen) on CodePen.
Ich hoffe, das Snippet ist hilfreich. Schreibt mir in den Kommentaren, was Ihr daraus Tolles baut.
Hatte ich so noch nicht auf dem Schirm. Wird bei mir dann die ganzen Scripts bei sämtlichen Kundenprojekten ersetzen.
Weiter so! :-*