mozilla
Ihre Suchergebnisse

    align-content

    Übersicht

    Die align-content CSS Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht. Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.

    • Initialwert stretch
    • Anwendbar auf multi-line flexible Container
    • Vererbt Nein
    • Prozentwerte
    • Medium visuell
    • Berechneter Wert siehe Spezifikation
    • Animierbar Nein
    • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

    Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

    Syntax

    Formale Syntax: flex-start | flex-end | center | space-between | space-around | stretch
    
    align-content: flex-start
    align-content: flex-end
    align-content: center
    align-content: space-between
    align-content: space-around
    align-content: stretch
    
    align-content: inherit
    

    Werte

    flex-start
    Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.
    flex-end
    Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.
    center
    Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.
    space-between
    Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.
    space-around
    Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.
    stretch
    Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.

    Beispiele

    HTML:

    <div id="container">
      <p>align-content: flex-start</p>
      <div id="flex-start">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p>align-content: center</p>
      <div id="center">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p>align-content: flex-end</p>
      <div id="flex-end">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p>align-content: space-between</p>
      <div id="space-between">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p>align-content: space-around</p>
      <div id="space-around">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p>align-content: stretch</p>
      <div id="stretch">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    CSS:

    #container > div {
      display: flex;
      flex-flow: row wrap;
      width: 140px;
      height: 140px;
      background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
    }
    
    #container > div > div {
      margin: 2px;
      width: 30px;
      min-height: 30px;
      background: linear-gradient(-45deg, #788cff, #b4c8ff);
    }
    
    #flex-start {
      align-content: flex-start;
    }
    
    #center {
      align-content: center;
    }
    
    #flex-end {
      align-content: flex-end;
    }
    
    #space-between {
      align-content: space-between;
    }
    
    #space-around {
      align-content: space-around;
    }
    
    #stretch {
      align-content: stretch;
    }

    Ergibt:

    Spezifikationen

    Spezifikation Status Kommentar
    CSS Flexible Box Layout Module
    Die Definition von 'align-content' in dieser Spezifikation.
    Anwärter Empfehlung  

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Grundlegende Unterstützung 21.0-webkit 28.0 Nicht unterstützt 12.10 Nicht unterstützt
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Grundlegende Unterstützung ? ? 28.0 Nicht unterstützt 12.10 Nicht unterstützt

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz
    Zuletzt aktualisiert von: Sebastianz,