Selbst ausrichten - CSS-Tricks

Anonim

Die align-selfEigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.

Es ist möglich, den align-itemsWert für bestimmte Flex-Elemente zu überschreiben .

Die align-selfEigenschaft akzeptiert die gleichen 5 Werte wie align-items:

  • flex-start: Die Cross-Start-Randkante des Elements wird auf der Cross-Start-Linie platziert
  • flex-end: Die Kreuzrandkante des Elements wird auf der Kreuzendlinie platziert
  • center: Element ist in der Querachse zentriert
  • baseline: Elemente werden so ausgerichtet, wie ihre Grundlinie ausgerichtet ist
  • stretch (Standard): Strecken, um den Behälter zu füllen (Min-Breite / Max-Breite immer noch beachten)

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )

Demo

Die folgende Demo zeigt, wie sich ein Element je nach align-selfWert im Flex-Container ausrichten kann :

  • Der 1. Punkt ist auf gesetzt flex-start
  • Der 2. Punkt ist auf gesetzt flex-end
  • Der 3. Punkt ist auf gesetzt center
  • Der 4. Punkt ist auf gesetzt baseline
  • Der 5. Punkt ist auf gesetzt stretch

Sehen Sie sich die Pen Align-Self-Demo von CSS-Tricks (@ css-Tricks) auf CodePen an.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
21 * 28 11 12 6.1 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1 *

Weitere Informationen zum Mischen von Syntaxen, um die beste Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).