Flex - Align Items (CSS): Unterschied zwischen den Versionen
| (6 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| + | [[CSS - Flexbox]] | ||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container | ||
| − | |||
| − | |||
| − | + | Hier geht es darum wie man Flex-Boxen in einem Flex-Container ausrichten kann. '''Flex Container''' haben ja immer eine '''Hauptrichtung''' - nämlich row oder col. Defaultmäßig gehen Sie in Zeilenrichtung (row). | |
| − | Wenn man mit flex-direction:column die Richtung des Containers ändert vertauschen sich die Achsen, sprich die | + | == Ausrichten von Flex-Boxen im Flex-Container == |
| + | Flex Container haben immer eine '''Hauptrichtung - nämlich row oder col'''. Sobald ein Elternelement die Eigenschaft display: flex; bekommt, werden alle direkten Kindelemente zu flex-items. Defaultmäßig verteilen Sie sich in Zeilenrichtung (row). Wenn man mit '''flex-direction:column''' die Richtung des Containers ändert vertauschen sich die Achsen, sprich der Container möchte jetzt die Flex-Boxen in der vertikalen Ausrichten. | ||
| + | |||
| + | In vielen Fällen kann man die Ausrichtung der Boxen schon im Container regeln. Dazu gibt es die Befehle justify-content und align-items. | ||
| + | |||
| + | === Flexboxen verteilen mit justify-content === | ||
| + | '''Mit justify-content verteilt man die Boxen in der Hauptrichtung.''' | ||
| + | |||
| + | In der Querrichtung versucht Flex standardmäßig den ganzen Raum auszunutzen. Bei flex-direction: row; sind also erstmal alle Boxen gleich hoch, auch wenn eine mehr Inhalt enthält. Bei flex-direction: column nehmen die Items die ganze Breite ein, wenn man keine Breite explizit vergibt. | ||
| − | |||
| − | |||
=== Main Axis - justify-content === | === Main Axis - justify-content === | ||
<pre> | <pre> | ||
| − | justify-content: flex-start | + | justify-content: flex-start -> Boxen |
justify-content: flex-end | justify-content: flex-end | ||
justify-content: center | justify-content: center | ||
justify-content: space-between | justify-content: space-between | ||
justify-content: space-around | justify-content: space-around | ||
| − | |||
justify-content: space-evenly (not defined in the Flexbox specification) | justify-content: space-evenly (not defined in the Flexbox specification) | ||
</pre> | </pre> | ||
| − | === Cross Axis - align-items === | + | ==== Zeilenumbruch ==== |
| + | Standardmäßig versucht Flex alle Items in eine Reihe (oder Spalte) zu quetschen. Bei Spalten kann der Container in der Regel wachsen. In Reihen möchte man oft einen Umbruch. Den bekommt man mit. | ||
| + | flex-wrap: wrap; | ||
| + | flex-wrap: no-wrap; -> Standard | ||
| + | |||
| + | ==== Zwischenräume auffüllen ==== | ||
| + | Manchmal möchte man die Zwischenräume der Boxen auffüllen. In Zeilen kann man dafür gut mit '''width''' und Prozentangaben arbeiten. Im Responsiven Bereich kann man dann einfach z.B. von 25% Spalten auf 50% Spalten umschalten. | ||
| + | |||
| + | Für differenziertere Einstellung gibt es aber auch die Eigenschaften '''flex-grow, flex-shrink und flex-basis''' (siehe unten). | ||
| + | |||
| + | === Flexboxen zueinander Ausrichten mit align-items === | ||
| + | Auch für die Ausrichtung in der Querachse (also bei flex-direction: row in der vertikalen) kann man das Verhalten der Items steuern. Anders gesehen eht es also darum, wie sich die Elemente zueinander ausrichten. Also ob z.b. die Unterkannte der Boxen auf einer Linie sind, oder ob die Texte zueinander ausgerichtet sind egal wie viel Rand eine Box hat. | ||
| + | |||
| + | ==== Cross Axis - align-items ==== | ||
<pre> | <pre> | ||
align-items: flex-start | align-items: flex-start | ||
| Zeile 29: | Zeile 46: | ||
align-items: baseline | align-items: baseline | ||
</pre> | </pre> | ||
| + | '''stretch''' ist das Standardverhalten. Es vergrößert die Boxen bei Zeilen auf die gleiche Höhe und bei Spalten auf die ganze Breite. | ||
| + | |||
| + | '''flex-start''' richtet die Items bei row an der Oberkante bei column links aus. Die Boxen werden nicht mehr in Querrichtung gestretcht. | ||
| + | |||
| + | '''flex-end''' richtet auf der anderen Seite aus. | ||
| + | ''' baseline''' richtet bei Zeilen die Schrift zueinander aus. In Spaltenrichtung konnte ich aber nicht die Ausrichtung des Textes an der linken Kante nicht erreichen. Hier scheint die Einstellung sinnlos zu sein. | ||
| + | |||
| + | == Grow,Basis,Shrink == | ||
| + | https://www.youtube.com/watch?v=yPK8cwBEOmg (grow) | ||
| + | https://www.youtube.com/watch?v=tSdq8amjMso shrink | ||
| + | |||
| + | == Eigenschaften für Flex-Items align-content / align-self == | ||
| + | Es gibt auch Möglichkeiten die Flex-Items direkt zu beeinflussen. Dafür gibt es '''align-self''' und '''align-content'''. Mit '''align-self''' kann man das Ausrichten direkt auf das Item anwenden. | ||
| + | |||
| + | Mit '''align-content''' steuert man, wie sich '''aufeinanderfolgende Flex-Items die in neue Zeilen umbrechen''' verhalten (oder in neue Spalten bei flex-direction:col). | ||
=== Flex-Item-Distribution === | === Flex-Item-Distribution === | ||
Aktuelle Version vom 1. April 2021, 12:23 Uhr
CSS - Flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Hier geht es darum wie man Flex-Boxen in einem Flex-Container ausrichten kann. Flex Container haben ja immer eine Hauptrichtung - nämlich row oder col. Defaultmäßig gehen Sie in Zeilenrichtung (row).
Ausrichten von Flex-Boxen im Flex-Container[Bearbeiten]
Flex Container haben immer eine Hauptrichtung - nämlich row oder col. Sobald ein Elternelement die Eigenschaft display: flex; bekommt, werden alle direkten Kindelemente zu flex-items. Defaultmäßig verteilen Sie sich in Zeilenrichtung (row). Wenn man mit flex-direction:column die Richtung des Containers ändert vertauschen sich die Achsen, sprich der Container möchte jetzt die Flex-Boxen in der vertikalen Ausrichten.
In vielen Fällen kann man die Ausrichtung der Boxen schon im Container regeln. Dazu gibt es die Befehle justify-content und align-items.
Flexboxen verteilen mit justify-content[Bearbeiten]
Mit justify-content verteilt man die Boxen in der Hauptrichtung.
In der Querrichtung versucht Flex standardmäßig den ganzen Raum auszunutzen. Bei flex-direction: row; sind also erstmal alle Boxen gleich hoch, auch wenn eine mehr Inhalt enthält. Bei flex-direction: column nehmen die Items die ganze Breite ein, wenn man keine Breite explizit vergibt.
Main Axis - justify-content[Bearbeiten]
justify-content: flex-start -> Boxen justify-content: flex-end justify-content: center justify-content: space-between justify-content: space-around justify-content: space-evenly (not defined in the Flexbox specification)
Zeilenumbruch[Bearbeiten]
Standardmäßig versucht Flex alle Items in eine Reihe (oder Spalte) zu quetschen. Bei Spalten kann der Container in der Regel wachsen. In Reihen möchte man oft einen Umbruch. Den bekommt man mit.
flex-wrap: wrap; flex-wrap: no-wrap; -> Standard
Zwischenräume auffüllen[Bearbeiten]
Manchmal möchte man die Zwischenräume der Boxen auffüllen. In Zeilen kann man dafür gut mit width und Prozentangaben arbeiten. Im Responsiven Bereich kann man dann einfach z.B. von 25% Spalten auf 50% Spalten umschalten.
Für differenziertere Einstellung gibt es aber auch die Eigenschaften flex-grow, flex-shrink und flex-basis (siehe unten).
Flexboxen zueinander Ausrichten mit align-items[Bearbeiten]
Auch für die Ausrichtung in der Querachse (also bei flex-direction: row in der vertikalen) kann man das Verhalten der Items steuern. Anders gesehen eht es also darum, wie sich die Elemente zueinander ausrichten. Also ob z.b. die Unterkannte der Boxen auf einer Linie sind, oder ob die Texte zueinander ausgerichtet sind egal wie viel Rand eine Box hat.
Cross Axis - align-items[Bearbeiten]
align-items: flex-start align-items: flex-end align-items: center align-items: stretch align-items: baseline
stretch ist das Standardverhalten. Es vergrößert die Boxen bei Zeilen auf die gleiche Höhe und bei Spalten auf die ganze Breite.
flex-start richtet die Items bei row an der Oberkante bei column links aus. Die Boxen werden nicht mehr in Querrichtung gestretcht.
flex-end richtet auf der anderen Seite aus. baseline richtet bei Zeilen die Schrift zueinander aus. In Spaltenrichtung konnte ich aber nicht die Ausrichtung des Textes an der linken Kante nicht erreichen. Hier scheint die Einstellung sinnlos zu sein.
Grow,Basis,Shrink[Bearbeiten]
https://www.youtube.com/watch?v=yPK8cwBEOmg (grow) https://www.youtube.com/watch?v=tSdq8amjMso shrink
Eigenschaften für Flex-Items align-content / align-self[Bearbeiten]
Es gibt auch Möglichkeiten die Flex-Items direkt zu beeinflussen. Dafür gibt es align-self und align-content. Mit align-self kann man das Ausrichten direkt auf das Item anwenden.
Mit align-content steuert man, wie sich aufeinanderfolgende Flex-Items die in neue Zeilen umbrechen verhalten (oder in neue Spalten bei flex-direction:col).
Flex-Item-Distribution[Bearbeiten]
The align-content property takes the following values:
align-content: flex-start align-content: flex-end align-content: center align-content: space-between align-content: space-around align-content: stretch align-content: space-evenly (not defined in the Flexbox specification)
