Flex - Align Items (CSS): Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container == Align in Flex Container == Flex Container haben…“) |
|||
| Zeile 5: | Zeile 5: | ||
In der Hauptrichtung macht man das Align mit '''justify-content'''. Sprich bei Row in der Horizontalen. In der Querrichtung richtet man mit '''align-items''' aus. | In der Hauptrichtung macht man das Align mit '''justify-content'''. Sprich bei Row in der Horizontalen. In der Querrichtung richtet man mit '''align-items''' aus. | ||
| − | Wenn man mit flex-direction: | + | Wenn man mit flex-direction:column die Richtung des Containers ändert vertauschen sich die Achsen, sprich die vertikale wird zur horizontalen ausrichtung. |
Außerdem gibt es noch align-self und align-content. Mit '''align-self''' kann man das Ausrichten direkt auf das Item anwenden. | 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- | + | Mit '''align-content''' steuert man, wie sich '''aufeinanderfolgende Flex-Items die in neue Zeilen umbrechen''' verhalten (oder in neue Spalten bei flex-direction:col). |
=== Main Axis - justify-content === | === Main Axis - justify-content === | ||
| − | + | <pre> | |
| + | justify-content: flex-start | ||
| + | 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) | ||
| + | </pre> | ||
=== Cross Axis - align-items === | === Cross Axis - align-items === | ||
| Zeile 20: | Zeile 28: | ||
align-items: stretch | align-items: stretch | ||
align-items: baseline | align-items: baseline | ||
| + | </pre> | ||
| + | |||
| + | === Flex-Item-Distribution === | ||
| + | The align-content property takes the following values: | ||
| + | <pre> | ||
| + | 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) | ||
</pre> | </pre> | ||
Version vom 6. Dezember 2019, 14:36 Uhr
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Align in Flex Container
Flex Container haben ja immer eine Hauptrichtung - nämlich row oder col. Defaultmäßig gehen Sie in Zeilenrichtung (row).
In der Hauptrichtung macht man das Align mit justify-content. Sprich bei Row in der Horizontalen. In der Querrichtung richtet man mit align-items aus.
Wenn man mit flex-direction:column die Richtung des Containers ändert vertauschen sich die Achsen, sprich die vertikale wird zur horizontalen ausrichtung.
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).
Main Axis - justify-content
justify-content: flex-start 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)
Cross Axis - align-items
align-items: flex-start align-items: flex-end align-items: center align-items: stretch align-items: baseline
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)
