CSS3 Flexbox

Verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften

Auf dieser Seite sind diverse Beispiele zur CSS3-Flexbox zu finden, es wird die Auswirkung der einzelnen Elemente dargestellt.

Entstanden sind diese Beispiele als Ergänzung zu einem Flexbox-Artikel im Fachmagazin www.screengui.de. Dort wird das Verhalten der einzelnen CSS3-Flexbox-Eigenschaften im Detail auf 6 Seiten beschrieben.

<div class="flexbox">
    <div class="box-01">
        <h2>Box 1</h2>
    </div>
    <div class="box-02">
        <h2>Box 2</h2>
    </div>
    <div class="box-03">
        <h2>Box 3</h2>
    </div>
</div>

.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border: 2px solid #333;
}

Alle Beispiele basieren auf diesem HTML-Code.
Ebenfalls werden alle Beispiele über die CSS-Regel zur Flexbox gemacht.

Beispiel 1 initial (flex-direction: row)

Ohne weitere CSS-Regeln und bei wenig Inhalt fügen sich die Flexbox-Elemente von links nach rechts in die Flexbox ein.

Beispiel 2 initial (flex-direction: row)

Bei viel Inhalt verteilen sich die drei Boxen gleichmäßig auf den verfügbaren Platz.

Beispiel 3 flex-direction: row-reverse

#beispiel-03 {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

Über row-reverse wird die Fließrichtung der Flexbox-Elemente umgekehrt.

Beispiel 4 flex-direction: column

#beispiel-04 {
    -ms-flex-direction: column;
    flex-direction: column;
}

Über flex-direction: column wird eine Reihendarstellung definiert.

Beispiel 5 flex-direction: column-reverse

#beispiel-05 {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

column-reverse dreht die Reihenfolge der Flexbox-Elemente in der Reihendarstellung um.

Beispiel 6 order: 2; order: 3; order: 1;

#beispiel-06 .box-01 {
    -ms-flex-order: 2;
    order: 2;
}
#beispiel-06 .box-02 {
    -ms-flex-order: 3;
    order: 3;
}
#beispiel-06 .box-03 {
    -ms-flex-order: 1;
    order: 1;
}

Über order kann die Reihenfolge der Flexbox-Elemente konkret gesteuert werden.

Beispiel 7 order: 2; order: 3; order: 1;

#beispiel-07 .box-01 {
    -ms-flex-order: 2;
    order: 2;
}
#beispiel-07 .box-02 {
    -ms-flex-order: 3;
    order: 3;
}
#beispiel-07 .box-03 {
    -ms-flex-order: 1;
    order: 1;
}

Die Box 4 hat keine order-Deklaration - der Initialwert ist 0, die Box wird vor den anderen Boxen angezeigt, deren Position über order gesteuert ist.

Beispiel 8 initial (align-items: stretch)

Per Default dehnen sich alle Flexbox-Elemente auf die gleiche Höhe aus, welche durch die Höhe der Box mit dem meisten Inhalt bestimmt wird.

Beispiel 9 align-items: flex-start

#beispiel-09 {
    -ms-flex-align: start;
    align-items: flex-start;
}
#beispiel-09 div {
    -ms-flex: 1 1 auto;
}

align-items: flex-start steuert, dass die Flexbox-Elemente am oberen Rand angeordnet werden.

Beispiel 10 align-items: center

#beispiel-10 {
    -ms-flex-align: center;
    align-items: center;
}
#beispiel-10 div {
    -ms-flex: 1 1 auto;
}

align-items: center führt dazu, dass sich die Flexbox-Element mittig zueinander anordnen.

Beispiel 11 align-items: flex-end

#beispiel-11 {
    -ms-flex-align: end;
    align-items: flex-end;
}
#beispiel-11 div {
    -ms-flex: 1 1 auto;
}

align-items: flex-end lässt die Elemente am unteren Rand der Flexbox erscheinen.

Beispiel 12 align-items: baseline

#beispiel-12 {
    -ms-flex-align: baseline;
    align-items: baseline;
}
#beispiel-12 div {
    -ms-flex: 1 1 auto;
}
#beispiel-12 h2 {
    font-size: 2.5em;
}

align-items: baseline richtet die Elemente so aus, dass die Grundlinie der jeweils ersten Zeilen auf einer Höhe sind.

Beispiel 13 initial (justify-content: flex-start)

Gleiches Beispiel wie Nr. 1. Per Default fließen die Flexbox-Elemente von links nach rechts ohne Lücken dazwischen.

Beispiel 14 justify-content: flex-end

#beispiel-14 {
    -ms-flex-pack: end;
    justify-content: flex-end;
}

justify-content: flex-end führt dazu, dass die Flexbox-Elemente von links nach rechts ohne Lücken fließen.

Beispiel 15 justify-content: center

#beispiel-15 {
    -ms-flex-pack: center;
    justify-content: center;
}

justify-content: center führt dazu, dass die Flexbox-Elemente mittig angeordnet werden. Wird nur sichtbar, wenn nicht die volle Breite der Flexbox ausgefüllt ist.

Beispiel 16 justify-content: space-between

#beispiel-16 {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

justify-content: space-between steuert, dass die Elemente gleichmäßig auf die volle Breite verteilt werden, der Raum zwischen den Elementen bleibt leer, die äußeren Elemente werden direkt am Rand der Flexbox angezeigt.

Beispiel 17 justify-content: space-around

#beispiel-17 {
    justify-content: space-around;
}

justify-content: space-around verteilt die Flexbox-Elemente ebenfalls auf die verfügbare Breite, allerdings werden die Elemente auch zum Rand hin mit Abstand dargestellt, welcher der Hälfte der Abstände der einzelnen Elemente zueinander entspricht.

Beispiel 18 initial (justify-content: flex-start)

#beispiel-18,
#beispiel-19,
#beispiel-20,
#beispiel-21,
#beispiel-22 {
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 300px;
}

In der Reihendarstellung werden die Flexbox-Elemente in der Flexbox oben angeordnet. Dazu muss die Flexbox jedoch eine höhere Höhe haben, als die Summe der Höhe der Flexbox-Elemente.

Beispiel 19 justify-content: flex-end

#beispiel-19 {
    justify-content: flex-end;
}
#beispiel-19 div {
    -ms-flex-align: end;
}

justify-content: flex-end steuert, dass die Flexbox-Elemente am unteren Rand der Flexbox angezeigt werden.

Beispiel 20 justify-content: center

#beispiel-20 {
    justify-content: center;
}

justify-content: center bewirkt die mittige Darstellung der Flexbox-Elemente.

Beispiel 21 justify-content: space-around

#beispiel-21 {
    justify-content: space-around;
}

justify-content: space-around verteilt die Elemente gleichmäßig in der Flexbox, hier ebenfalls mit Abstand zum Rand, der auch hier die Hälfte des Abstands zwischen den Flexbox-Elementen entspricht.

Beispiel 22 justify-content: space-between

#beispiel-22 {
    justify-content: space-between;
}

justify-content: space-between verteilt die Flexbox-Elemente ebenfalls gleichmäßig in der Flexbox, jedoch ohne Abstand zum Rand.

Beispiel 23 flex-grow

#beispiel-23 .box-01,
#beispiel-23 .box-02,
#beispiel-23 .box-03 {
    -ms-flex: 1 1 auto;
    flex-grow: 1;
}

flex-grow steuert die bevorzugte Breite für die Verteilung innerhalb der Flexbox. Als Parameter wird ein positiver Integer erwartet, Standardwert ist 1, ohne spezielle Deklaration verteilen sich die Elemente gleichmäßig (bei gleicher Menge des Inhalts, bei unterschiedlicher Menge des Inhalts beeinflusst die Menge des Inhalts die Breite der einzelnen Flexbox-Elemente).

Beispiel 24 flex-grow

#beispiel-24 .box-01 {
    -ms-flex: 1 1 auto;
    flex-grow: 1;
}
#beispiel-24 .box-02 {
    -ms-flex: 4 1 auto;
    flex-grow: 4;
}
#beispiel-24 .box-03 {
    -ms-flex: 1 1 auto;
    flex-grow: 1;
}

Für die zweite Box in diesem Beispiel wird über flex-grow: 4; der Ausdehnungsfaktor auf 4 gesetzt. Sie dehnt sich im Verhältnis mehr aus als die anderen Boxen. Die Schreibweise -ms-flex: 4 1 auto; ist für den Internet 10 notwendig, die nicht der W3C-Schreibweise entspricht.

Beispiel 25 flex-basis

#beispiel-25 .box-01 {
    -ms-flex: 0 0 150px;
    flex-basis: 150px;
}
#beispiel-25 .box-02 {
    -ms-flex: 0 0 300px;
    flex-basis: 300px;
}
#beispiel-25 .box-03 {
    -ms-flex: 0 0 150px;
    flex-basis: 150px;
}

Über flex-basis wird die Basisbreite der Flexbox-Elemente definiert. Ist die Flexbox breiter als die Summe der einzelnen Elemente, bleibt die überschüssige Fläche frei.

Beispiel 26 flex-basis

#beispiel-26 .box-01 {
    -ms-flex: 1 1 100px;
    flex-basis: 100px;
    flex-grow: 1;
}
#beispiel-26 .box-02 {
    -ms-flex: 1 1 300px;
    flex-basis: 300px;
    flex-grow: 1;
}
#beispiel-26 .box-03 {
    -ms-flex: 1 1 100px;
    flex-basis: 100px;
    flex-grow: 1;
}

flex-basis in der Kombination mit flex-grow bewirkt, dass die ganze Breite der Flexbox ausgefüllt wird. Dabei bestimmt die über flex-basis definierte Breite die verhältnismäßige Ausdehnung der einzelnen Elemente.

Beispiel 27 flex-basis

#beispiel-27 .box-01 {
    -ms-flex: 1 1 100px;
    flex-basis: 100px;
    flex-grow: 1;
}
#beispiel-27 .box-02 {
    -ms-flex: 4 1 100px;
    flex-basis: 100px;
    flex-grow: 4;
}
#beispiel-27 .box-03 {
    -ms-flex: 1 1 100px;
    flex-basis: 100px;
    flex-grow: 1;
}

flex-grow: 4 bewirkt in diesem Beispiel, dass die 2. Box verhältnismäßig breiter angezeigt wird.

Beispiel 28 flex-shrink

#beispiel-28 .box-01 {
    -ms-flex: 1 4 auto;
    flex-shrink: 4;
}
#beispiel-28 .box-02 {
    -ms-flex: 1 5 auto;
    flex-shrink: 5;
}
#beispiel-28 .box-03 {
    -ms-flex: 1 6 auto;
    flex-shrink: 6;
}

flex-shrink steuert im Gegensatz zu flex-grow den Stauchungsfaktor und erwartet auch einen positiven Integer. Umso höher der Wert, umso stärker das verhältnismäßige schrumpfen des Flexbox-Elements.

Beispiel 29 initial (flex-wrap: nowrap)

#beispiel-29 div,
#beispiel-30 div,
#beispiel-31 div,
#beispiel-32 div {
    min-width: 200px;
}

Initial überfließen Flexbox-Elemente die Flexbox, wenn die einzelnen Elemente in der Flexbox die gesamte Breite der Flexbox überschreiten.

Beispiel 30 flex-wrap: wrap

#beispiel-30 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

flex-wrap: wrap bewirkt, dass die einzelnen Flexbox-Elemente umbrechen, wenn sie nicht mehr in die verfügbare Breite passen.

Beispiel 31 flex-wrap: wrap-reverse

#beispiel-31 {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

flex-wrap: wrap-reverse bewirkt ebenfalls, dass die Flexbox-Elemente umbrechen, allerdings nach oben.

Beispiel 32

#beispiel-32 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#beispiel-32 div {
    -ms-flex: 1 1 auto;
    flex-grow: 1;
}

flex-wrap in der Kombination mit flex-grow bewirkt, dass die Flexbox-Elemente umbrechen, außerdem die volle Breite ausgefüllt wird.

Feedback, Fragen, Kommentare?

Kontakt gerne über info@css-wiki.com / www.css-wiki.com.

© 2014 - Stephan Heller [daik.de] - http://daik.de