Flex - Align Items (CSS): Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 1: | Zeile 1: | ||
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). | |
| − | + | == Align in Flex Container und flex-direction == | |
| + | Im Flex-Container kann man vorgeben, wie sich die Flex-Boxen verteilen sollen. Je nachdem ob man flex-direction: row oder flex-direction: column; gewählt hat. Verteilt Flex die Boxen waagerecht oder senkrecht. | ||
| + | |||
| + | == 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 (alle Boxen sind also erstmal gleich hoch. In der Querrichtung richtet man mit '''align-items''' aus (siehe unten). | ||
| − | |||
| − | |||
=== 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 | ||
| Zeile 20: | Zeile 20: | ||
justify-content: space-evenly (not defined in the Flexbox specification) | justify-content: space-evenly (not defined in the Flexbox specification) | ||
</pre> | </pre> | ||
| − | + | === Umbruch === | |
| + | Standardmäßig versucht Flex alle Boxen in eine Reihe zu quetschen | ||
=== Cross Axis - align-items === | === Cross Axis - align-items === | ||
<pre> | <pre> | ||
| Zeile 30: | Zeile 31: | ||
</pre> | </pre> | ||
| + | Außerdem gibt es noch 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 === | ||
The align-content property takes the following values: | The align-content property takes the following values: | ||
Version vom 18. Dezember 2019, 07:54 Uhr
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).
Align in Flex Container und flex-direction
Im Flex-Container kann man vorgeben, wie sich die Flex-Boxen verteilen sollen. Je nachdem ob man flex-direction: row oder flex-direction: column; gewählt hat. Verteilt Flex die Boxen waagerecht oder senkrecht.
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 (alle Boxen sind also erstmal gleich hoch. In der Querrichtung richtet man mit align-items aus (siehe unten).
Main Axis - justify-content
justify-content: flex-start -> Boxen justify-content: flex-end justify-content: center justify-content: space-between justify-content: space-around justify-content: stretch justify-content: space-evenly (not defined in the Flexbox specification)
Umbruch
Standardmäßig versucht Flex alle Boxen in eine Reihe zu quetschen
Cross Axis - align-items
align-items: flex-start align-items: flex-end align-items: center align-items: stretch align-items: baseline
Außerdem gibt es noch 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
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)
