display flex und inline-flex
display:flex bzw. display: inline-flex sind elegante Lösungen für das Ausrichten benachbarter Elemente. Das Zentrieren von Elementen kostet mit display:flex / inline-flex gerade mal eine Zeile.
Alle direkten Nachkommen eines Elements werden zu Flexboxen, die entlang der horizontalen (row) und vertikalen Achse (column) ausgerichtet werden.
Ob flex oder inline-flex – flex hat keinen Einfluss auf die Ausrichtung der Elemente in einer Flexbox, sondern regelt nur, wie sich Flex-Elemente gegenüber benachbarten Elementen verhalten. Es spricht aber nichts dagegen, Blöcke innerhalb eines Flex-Containers selber zu Flex-Containern zu machen.
Picossi
1929 - 1999
Enim eiusmod high life mainus Picasso ad squid. Spainsdomus high noon officia.
Büccioni
1962 - 2009
Flooter boot quinoa rasant eiusmod. Boccioni nelle la protection des données de l'entreprise.
Mindirane
1919 - 2000
Lorsque vous visitez notre site Mondrian occu luomi tapesteri accidental.
.flex-box {display:flex; justify-content: space-around;}.flex-box > div {display: flex;flex-direction: column;align-items:center;}
Alle modernen Browser beherrschen display: flex.
Positionieren mit dem Flexmodell
Das Flexmodell hat das Ausrichten und Verteilen von Boxen und freiem Raum aus der Grafik abgekupfert, und basiert auf einer horizontalen bzw. einer vertikalen Achse:
So sieht das Flexmodell für eine zeilenorientierte Verteilung (flex-direction:row) der Flexboxen aus.Äquivalent gibt es auch noch die spaltenorientierte Verteilung von Flexboxen (flex-direction: column).
Alle direkten Nachkommen eines Containers mit CSS display:flex werden zu Flex-Items und reihen sich in einer Zeile auf.Die Nachkommen müssen nicht vom selben Typ sein. Per Vorgabe erzeugt display:flex eine Zeile von Boxen.
Die Eigenschaften des Flexmodells werden dem umfassenden Container zugewiesen und verteilen Flexboxen in Zeilen oder Spalten (display: flex bildet also kein Layout-Raster wie display: grid). display: flex gibt allen Flexboxen in einer Zeile dieselbe Höhe und nimmt uns so nebenbei die Berechnungen für den Platz zwischen den Boxen ab.
Mit space-around und space-between wird der freie Raum zwischen den Flexboxen verteilt.
- gap
- Später mit hinzugekommen: Endlich den Abstand zwischen Flexboxen ohne margin festlegen
- row-gap
- Abstand zwischen Flex-Zeilen
- column-gap
- Abstand zwischen Flex-Spalten
- flex-direction
- row (default)| column
- flex-flow (Kurzschrift für flex-direction und flex-wrap)
- row wrap | column wrap
- flex-wrap
- nowrap (default) | wrap | wrap-reverse
- justify-content
- flex-start (default) | flex-end | center | space-between | space-around
- align-items
- flex-start (default)| flex-end | center | baseline | stretch
- align-content
- flex-start | flex-end | center | space-between | space-around | stretch (default)
Die Reihenfolge der Elemente einer Flexbox kann durch order beliebig festgelegt werden.
- order
- .flexitem:nth-child(n) {order: m} (Beispiel für flex order)
Flexblöcke ausrichten
Die Eigenschaften display:block und display:inline-block kennen wir schon aus älteren CSS-Versionen. display:flex und display: grid kamen erst später in CSS an.
Ohne jegliche weitere Eigenschaft werden Flexboxen in einer Zeile aufgereiht. Wenn der Viewport des Browsers kleiner wird, quetscht der Browser die Boxen in eine Zeile.
.flexed { display: flex; }<div class="flexed"> <div class="flexitem">1 Nullam interdum malesuada dolor</div> <div class="flexitem">2 Lorem ipsum dolor sit amet</div> <div class="flexitem">3 Nullam sollicitudin</div> …</div>
Wenn der Platz reicht und die Größe der Boxen nicht durch CSS begrenzt ist, hängen die Flexboxen auf der linken Seite des Flex-Containers.
display:flex
Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Fusce at aliquet lorem.
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan
Syntax
display : flex
flex-direction
Verteilt alle direkten Nachkommen in einer Zeile (bzw. in einer Spalte, wenn zusätzlich flex-direction:column gilt). flex-direction: row ist die Voreinstellung und muss nicht explizit angegeben werden.
row
Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Fusce at aliquet lorem.
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan
flex-wrap
Packt alle Flexboxen in eine Zeile bzw. Spalte (nowrap), bricht die Zeile / Spalte um (wrap) oder kehrt die Reihenfolge der Flexboxen um (wrap-reverse).
Die Voreinstellung ist flex-wrap: nowrap – kein Umbrechen, sondern quetschen.
nowrap
1 Nullam interdum malesuada dolor,
et pellentesque lorem
2 Lorem ipsum dolor sit amet,
consectetur adipiscing
3 Nullam sollicitudin,
neque sit amet
cursus pulvinar
4 Nullam interdum malesuada dolor,
et pellentesque lorem
5 Fusce at aliquet lorem.
6 Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan
Syntax
flex-wrap : nowrapflex-wrap : wrapflex-wrap : wrap-reversflex-wrap : column-revers
IE 10 braucht display:inline-block für die Flex-Items, damit -ms-flex-flow: wrap funktioniert.
justify-content
richtet Flexboxen entlang der Hauptachse (links, rechts, zentriert) und verteilt den freien Raum zwischen den Flexboxen mit space-between bzw. space-around.
flex-start
Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Syntax
justify-content : flex-startjustify-content : flex-endjustify-content : centerjustify-content : space-betweenjustify-content : space-around
align-items
richtet Flexboxen an den Kanten oben, unten oder zentriert entlang der zweiten Achse aus (so wie justify-content entlang der Hauptachse).
flex-start
Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan
Syntax
align-items : flex-startalign-items : flex-endalign-items : centeralign-items : stretchalign-items : baseline
align-content
verteilt die Flexboxen anhand ihres Inhalts auf der zweiten Achse (so wie justify-content die Boxen auf der Hauptachse verteilt). Mit flex-direction:row verteilt align-content die Boxen also in der Vertikalen.
Einen sichtbaren Effekt hat align-content nur, wenn mehr als eine Reihe bzw. eine Spalte vorhanden ist.
Die Vorgabe ist stretch, so dass die Boxen die volle Höhe des Flex-Containers einnehmen.
#acbox { height:320px; display:flex; display:-ms-flexbox; flex-flow: row wrap; -ms-flex-wrap: row-wrap; justify-content:space-around; -ms-flex-pack:justify; align-content:flex-start; -ms-flex-line-pack:start;}
flex-start
Nullam interdum malesuada dolor,
et pellentesque lorem
Lorem ipsum dolor sit amet,
consectetur adipiscing
Nullam sollicitudin,
neque sit amet
cursus pulvinar
Ut consequat ipsum eu turpis elementum
vehicula. Ut auctor risus
non elit hendrerit accumsan
Lorem ipsum dolor sit amet,
consectetur adipiscing
Lorem ipsum dolor sit amet,
consectetur adipiscing. Ut consequat ipsum eu turpis elementum
vehicula.
Syntax
align-content : flex-startalign-content : flex-endalign-content : centeralign-content : space-betweenalign-content : space-aroundalign-content : stretch
flex-shrink, flex-grow, flex-basis
Wenn der Platz im Flex-Container nicht vollständig von Flex-Items aufgefüllt ist, verteilt justify-content die Flex-Items (s.o.). flex-shrink, flex-grow und flex-basis verteilen den freien Platz oder schränken die Breite / Höhe von Flex-Items ein, wenn der Platz nicht reicht.
display: flex vs. display: grid
Das Flexbox-Modell ist in erster Linie für das Layout in Zeilen und Spalten gedacht und ist die schmerzfreie Alternative zu CSS float. Flex setzt zwei, drei Blogbeiträge in saubere Zeilen je nach Platzangebot im Browserfenster.
CSS Grid ist ein Layout-Raster – ähnlich dem alten Tabellen-Layout – in Zeilen und Spalten und die beste Grundlage für ein modernes Layout der Webseite.
display flex ist flexibel: Wenn z.B. in einem Blog weitere Kurzfassungen in einer Übersicht erscheinen, fügen sie sich in Folge der Zusammenfassungen ein. Das CSS muss auch für das sechste, siebte oder elfte Element nicht geändert werden.
display grid ist für eine feste Anzahl von Elementen, deren Aufbau je nach Größe des Viewports angepasst wird.
Grid und Flex konkurrieren nicht miteinander, sondern ergänzen sich. Und auch wenn IE11 noch mit einer alten Syntax für das Grid-Layout und einem geringen Funktionsumfang viel Schreibaufwand mitbringt, können sowohl Flex als auch Grid heute im Design und Layout von Webseiten eingesetzt werden.