PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: align-content, Kategorien: Bildschirm­darstellung (allgemein), Flexible Box Layout (CSS 3)

Abstände und Ausrichtung von Flexbox-Elementen auf der Y-Achse

Steuert die Abstände und Ausrichtung von Flexbox-Elementen auf der Y-Achse.

CSS-Eigenschaft: align-content
KurzbeschreibungWerteStandardwertKategorieHinweis
Abstände und Ausrichtung von Flexbox-Elementen auf der Y-Achse
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch
stretch
Allgemein:
Bildschirm­darstellung
CSS 3:
Flexible Box Layout
Neu in CSS 3
 

Verwandte Eigenschaften aus der Kategorie: Bildschirm­darstellung (allgemein), Flexible Box Layout (CSS 3):

Folgendes ist beim Einsatz von align-content zu beachten:

  • align-content definiert, wie Abstände zwischen Flexbox-Elementen verteilt werden.
  • Zu beachten ist:
    • Greift nur, wenn die Flexbox selber höher ist als die Menge der darin enthaltenen Flexbox-Elemente.
    • Greift nur, wenn in der Flexbox mehrere Zeilen vorhanden sind. Bei einzelnen Zeilten hat align-content keine Auswirkung. Damit mehrere Zeilen entstehen, muss der Zeilenumbruch »aktiviert« sein. Dies wird über die CSS-Eigenschaft flex-wrap und dem Parameter wrap gesteuert. Da flex-wrap den Standardwert nowrap hat, muss wrap expliziet definiert sein.
  • Für align-content stehen folgende Parameter zur Verfügung:
    • flex-start: Alle Elemente werden oben angeordnet. Überschüssiger Leerraum befindet sich komplett unter den Flexbox-Elementen.
    • flex-end: Alle Elemente werden am unteren Rand der Flexbox angeordnet. Überschüssiger Leerraum wird über allen Flexbox-Elementen dargestellt.
    • center: Alle Zeilen werden mittig angezeigt. Der Leerraum verteilt sich zu gleichen Teilen über und unter den Flexbox-Elementen.
    • space-between: Die einzelnen Zeilen werden gleichmäßig auf der Y-Achse verteilt, der Leerraum wird zwischen den einzelnen Zeilen angezeigt. Die erste Zeile wird am oberen Rand, die letzte Zeile am unteren Rand der Flexbox angezeigt.
    • space-around: Hier werden die einzelnen Zeilen ebenfalls gleichmäßig in der Flexbox verteilt. Allerdings wird überschüssiger Leerraum auch über der ersten und unter der letzten Zeile angezeigt. Dabei entspricht der Abstand zum Rand der Flexbox der Hälfte, wie er zwischen den einzelnen Zeilen ist.
    • stretch (Standardwert): Verteilt alle Zeilen gleichmäßig auf die Flexbox, dabei werden die einzelnen Flexbox-Elemente so weit ausgedehnt, dass die komplette Flexbox gefüllt ist. Bei stretch werden in der Flexbox auf der Y-Achse keine Leerräume angezeigt.
  • Wird von aktuellen Webbrowser in der Standardschreibweise unterstützt. Lediglich der Safari benötigt das Vendor-Präfix -webkit-.
    Hinweis: Laut unterschiedlichen Quellen unterstützt der IE 11 das Flexbox-Modul. Ob er auch align-content unterstützt, und in welchem Kontext, prüfen wir noch.
  • Der Support von mobilen Browsern ist je nach Browser noch unzuverlässig (Stand: August 2014).
  • Sonderfall Internet Explorer 10:
  • Auch der Mozilla Firefox unterstützte das Flexbox Modul bis zur Version 21 mit einer abweichenden Syntax. Seit der Version 22 unterstützt Firefox die Standardschreibweise, allerdings mit Einschränkungen, der vollständige Support wird ab der Version 28 angegeben. Da der Firefox 22 bereits eine Weile zurückliegt, wird hier nicht weiter auf die alte Schreibweise eingegangen. Eine Einführung in das Flexbox-Modul mit der alten Syntax ist unter Quick hits with the Flexible Box Model (Paul Irish) zu finden.

Hinweis:

Eine allgemeine Einführung in das CSS3 Flexbox Modul ist bei den Webkrauts zu finden: CSS3 Flexbox: Ablösung für Float-Layouts (Dezember 2012)

Weitere Quelltextbespiele sind unter http://www.css-wiki.com/listings/flexbox.html zu finden. Diese sind im Rahmen eines Artikels über das CSS3 Flexbox Modul entstanden, der Artikel ist in der SCREENGUIDE Jahrgang 2014 :: Ausgabe 22 erschienen.

Browserunterstützung von align-content
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
nj
Version: 20Version: 30Version: 35Version: 36Version: 37
nj
Version: 8Version: 9Version: 10Version: 11
n-ms-j
Version: 4Version: 5Version: 6Version: 7
n-webkit-
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu align-content:



Beispiele

HTML:

<div id="example-1">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

div {
    border: 4px solid #cccccc;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;    
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 18em;
}
div p {
    background-color: #90EE90;
    border: 1px solid darkblue;
    padding: 0.25em;
    font-size: 2em;
    margin: 0;
}
/* Ohne eine Angabe von align-content greift der Standardwert stretch. Flexbox-Elemente werden auf die ganze Flexbox ausgehent. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 1 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

HTML:

<div id="example-2">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

#example-2 {
    align-content: flex-start;                
}
/* flex-start läßt alle Zeilen am oberen Rand der Flexbox erscheinen. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 2 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

HTML:

<div id="example-3">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

#example-3 {
    align-content: flex-end;                
}
/* flex-end sorgt dafür, dass vorhandener Leerraum über den Zeilen angezeigt wird. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 3 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

HTML:

<div id="example-4">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

#example-4 {
    align-content: center;                
}
/* center bewirkt die mittige Darstellung aller Zeilen auf der Y-Achse. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 4 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

HTML:

<div id="example-5">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

#example-5 {
   align-content: space-between;                
}
/* space-between bewirkt, dass überschüssiger Leerraum zwischen den Flexbox-Elementen dargestellt wird. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 5 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

HTML:

<div id="example-6">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

#example-6 {
    align-content: space-around;                
}
/* space-around ist ähnlich wie space-between, nur das noch vor und nach den Flexbox-Elementen zum Rand der Flexbox
noch Leerraum angezeigt wird. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 6 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

HTML:

<div id="example-7">
    <p>eins</p>
    <p>zwei</p>
    <p>drei</p>
    <p>vier</p>
    <p>fünf</p>
    <p>sechs</p>
    <p>sieben</p>
    <p>acht</p>
    <p>neun</p>
    <p>zehn</p>
</div>

CSS:

#example-7 {
    align-content: space-around;       
}
#example-7 p {
    -ms-flex: 1 1 auto;
    flex-grow: 1;
}
/* Dieses Beispiel zeigt, wie über flex-grow: 1 die einzelnen Zeilen auf die komplette Breite ausgedehnt wird. Dient nur als Ergänzung, 
weitere Erkärung zu flex-grow ist entsprechend dort zu finden. */
Beispiel nur für: Firefox
W3C: 28
Google Chrome
-webkit-: 21W3C: 30
Internet Explorer
-ms-: 10W3C: 11
Safari
-webkit-: 6.1
Opera
W3C: 12

Beispiel Nr. 7 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.047 sec.