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

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

Vertikale Ausrichtung einzelner Elemente in Flexboxen

Steuert die vertikale Ausrichtung beziehungsweise Positionierung einzelner HTML-Elemente innerhalb einer Flexbox.

CSS-Eigenschaft: align-self
KurzbeschreibungWerteStandardwertKategorieHinweis
Vertikale Ausrichtung einzelner Elemente in Flexboxen
  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
auto
Allgemein:
Bildschirm­darstellung
CSS 3:
Flexible Box Layout
Neu in CSS 3
 

Folgendes ist beim Einsatz von align-self zu beachten:

Mit dem Flexbox-Modul liefert der CSS3-Standard ein völlig neues Layout-Konzept. Einerseits können Elemente in Reihen und Spalten dargestellt werden, die Reihenfolge der Elemente in einer Flexbox kann umgekehrt oder konkret gesteuert werden. Ebenso können die Ausrichtung und die Füllung von Reihen und Spalten bestimmt werden.

align-items ist für die vertikale Ausrichtung aller Elemente in Flexboxen verantwortlich. Diese Eigenschaft wird der Flexbox selber zugewiesen. align-self ermöglicht es dann, die vertikale Ausrichtung einzelner Elemente in einer Flexbox zu steuern. align-self wird von daher den HTML-Elementen zugewiesen, die in einer Flexbox liegen. Damit ist es möglich, für einzelne Elemente in einer Flexbox eine individuelle vertikale Ausrichtung zu vergeben, die von der allgemeinen Ausrichtung abweicht.

Generell gilt aber: Ohne eine flex- oder inline-flex-Angabe für display haben align-self und align-items keine Auswirkung.

Für align-self stehen folgende Werte zur Verfügung:

  • auto ist der Standardwert. Was lediglich bedeutet, dass align-self den Wert von align-items übernimmt.
  • align-self: flex-start - das Element ordnet sich an der Oberkante an flex-start legt fest, dass das Elemente am oberen Rand der Flexbox ausgerichtet wird. Die Höhe des HTML-Elements wird bei flex-start durch die Menge des Inhalts bestimmt (in der Grafik die gelbe Box, die anderen Boxen haben den Wert stretch, den Elemente in einer Flexbox per Default haben).
  • align-self: flex-end - das Elemente ordnet sich an der Unterkante an flex-end steuert die Ausrichtung des Elements am unteren Rand der Flexbox. Auch hier richtet sich die Höhe des Elements nach deren Inhalt.
  • align-items: center - das Element wird vertical zentriert center definiert die Zentrierung des Elements in vertikaler Richtung. Auch hier ist die Höhe des Elements abhängig von der Menge des Inhalts.
  • align-self: baseline - die definierten Elemente in einer Flexbox 
                richten sich an der gemeinsamer Grundlinie aus baseline legt fest, dass sich Elemente in einer Flexbox anhand der Grundlinie der jeweils ersten Zeile im Element ausrichten. Im Gegensatz zu allen anderen Parametern von align-self, die auf einzelne Elemente in einer Flexbox angewendet werden können, müssen für baseline mindestens zwei Elemente in einer Flexbox diesen Parameter haben, damit diese Elemente in Bezug gesetzt werden können, um die gemeinsame Grundlinie zu bestimmen (In der Grafik haben die gelbe und die orange Box eine baseline-Anweisung). Die Wirkweise von baseline ist ausführlicher unter align-items beschrieben.
  • align-self: stretch - das Elemente wird auf die verfügbare Höhe ausgedehnt stretch sorgt dafür, dass sich ein Element auf die verfügbare Höhe ausdehnt, unabhängig von der Menge des Inhalts (In der Grafik wurde die Flexbox mit einer festen Höhe versehen. Die gelbe Box hat hier den Parameter stretch, die anderen flex-end).

Allgemeines zur Flexbox

Das Flexbox-Modul vereint verschiedene Eigenschaften. Einerseits können HTML-Elemente elegant nebeneinander positioniert werden und passen sich automatisch an den verfügbaren Raum an. Vor allem das stretch-Verhalten bietet das, was früher nur mit HTML-Tabellen möglich war und wahrscheinlich die Ursache dafür ist, dass jahrelang Layout-Tabellen als "best practice" galten.

Mit dem Flexbox-Modul von CSS3 fällt auch das letzte Argument für Layout-Tabellen. Flexbox hat das Potential, ein neues Zeitalter in der Webgestaltung einzuläuten. Ob das passiert, sei abzuwarten.

Wird aktuell (Januar 2013) von Opera (ab der Version 12.10) sowie von Google Chrome (ab der Version 21.0) mit dem Vendor-Präfix -webkit- unterstützt.

Stand Juli 2013: Firefox unterstützt das Flexbox-Modul in der Version 18 und 19, wenn in der about:config der Parameter layout.css.flexbox.enabled auf true gesetzt ist. Ab der Version 20 von Firefox wird das Flexbox-Modul in der Standardschreibweise unterstützt.

Hinweis:

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

Browserunterstützung von align-self
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: 6
n
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu align-self:



Beispiele

HTML:

<div id="example-1">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-1 {
    display: -webkit-flex;
    display: flex;
}
/* Ausgangsituation: 
Über display: flex (bzw. die Schreibweise mit Vendor-Präfix -webkit-) wird dem umgebenden DIV die Flexbox-Eigenschaften zugewiesen. 
Per Default hat die Eigenschaft align-items den Wert stretch (auch wenn nicht explizit hinterlegt). Alle Elemente dehnen sich so auf die selbe Höhe. */

/* Anmerkung: Für alle Beispiele wird ein Rahmen für die Flexbox sowie für alle darin liegenden Element definiert. Abstände sorgen für etwas mehr Übersichtlichkeit. Jedes einzelne Element erhält zusätzlich eine individuelle Hintergrund­farbe. Diese allgemeinen Regeln wirken auf alle folgende Beispiele. */
div {
    border: 2px solid #999;
}
div div {
    border: 2px solid #333;
    margin: 5px;
    padding: 5px;
}
.box-1 {
    background-color: #99ff00;
}
.box-2 {
    background-color: #ffff00;
}
.box-3 {
    background-color: #ff9900;
}
.box-4 {
    background-color: #ff0000;
}
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 1 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="example-2">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-2 {
    display: -webkit-flex;
    display: flex;
    
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
#example-2 .box-2 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
/* align-self: flex-start steuert, dass das betreffende Element sich in der Flexbox oben ausrichtet. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 2 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="example-3">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-3 {
    display: -webkit-flex;
    display: flex;
}
#example-3 .box-2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
/* align-self: flex-end steuert, dass das betreffende Element sich in der Flexbox unten ausrichtet. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 3 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="example-4">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-4 {
    display: -webkit-flex;
    display: flex;
}
#example-4 .box-2 {
    -webkit-align-self: center;
    align-self: center;
}
/* align-self: center steuert, dass das betreffende Element sich in der Flexbox in der Vertikalen zentriert. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 4 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="example-5">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo</div>
</div>

CSS:

#example-5 {
    display: -webkit-flex;
    display: flex;
    
   background-image: url('/img/red-dot.png');
   background-repeat: repeat-x;
   background-position: 0px 59px;

}
#example-5 .box-2,
#example-5 .box-3 {
    -webkit-align-self: baseline;
    align-self: baseline;
   opacity: 0.8;
}
#example-5 .box-2 {
   font-size: 50px;
}
/* baseline sorgt dafür, das Elemente in einer Flexbox anhand der Grundlinie des jeweiligen Elements ausgerichtet werden (Box 2 und Box 3, durch die rote Linie symbolisiert.)
Damit baseline für align-self wirken kann, müssen mindestens zwei Elemente in einer Flexbox damit versehen sein. Erst darüber kann ein Bezug der gemeinsamen Grundlinie hergestellt werden. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 5 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo
 

HTML:

<div id="example-6">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#example-6 {
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: flex-end;
    align-items: flex-end;

    height: 300px;
}
#example-6 .box-2 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

/* align-self: stretch steuert, dass sich das betreffende Element in der Flexbox auf die ganze verfügbare Höhe ausdehnt. Auch wenn über ​align-items eine Ausrichtungsregel für alle Elemnte in der Flexbox definiert ist. */
Beispiel nur für: Firefox
W3C: 20
Google Chrome
-webkit-: 21
Opera
W3C: 12.1

Beispiel Nr. 6 So sieht's aus:

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="testcase-vendor">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#testcase-vendor {
    display: -moz-flex;
    display: -webkit-flex;
    display: -o-flex;
    display: -ms-flex;
    
}
#testcase-vendor .box-2 {
    -moz-align-self: flex-end;
    -webkit-align-self: flex-end;
    -o-align-self: flex-end;
    -ms-align-self: flex-end;
}
Beispiel nur für: Google Chrome
-webkit-: 21

Testbeispiel: Schreibweise mit
Vendor-Präfix

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

HTML:

<div id="testcase-standard">
   <div class="box-1">Lorem ipsum dolor sit amet</div>
   <div class="box-2">sed diam </div>
   <div class="box-3">nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua  labore et dolore magna aliquyam erat, sed diam voluptua </div>
   <div class="box-4">at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum</div>
</div>

CSS:

#testcase-standard {
    display: flex;
}
#testcase-standard .box-2 {
    align-self: flex-end;
}
Beispiel nur für: Firefox
W3C: 20
Opera
W3C: 12.1

Testbeispiel: Standardschreibweise

Lorem ipsum dolor sit amet
sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua
at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum
 

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.032 sec.