Flex - Align Items (CSS) - Versionsgeschichte

109.192.169.230 am 1. April 2021 um 11:23 Uhr

2021-04-01T11:23:00Z

37.49.72.8: /* Grow,Basis,Shrink */

2019-12-18T11:14:20Z

Grow,Basis,Shrink

37.49.72.8 am 18. Dezember 2019 um 11:08 Uhr

2019-12-18T11:08:34Z

37.49.72.8: /* Cross Axis - align-items */

2019-12-18T08:17:23Z

Cross Axis - align-items

37.49.72.8 am 18. Dezember 2019 um 08:06 Uhr

2019-12-18T08:06:48Z

37.49.72.8 am 18. Dezember 2019 um 07:52 Uhr

2019-12-18T07:52:59Z

37.49.72.8 am 18. Dezember 2019 um 06:54 Uhr

2019-12-18T06:54:26Z

37.49.72.8 am 6. Dezember 2019 um 13:36 Uhr

2019-12-06T13:36:31Z

37.49.72.8: 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…“

2019-12-06T13:30:20Z

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…“

Neue Seite

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:row 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-Container''' verhalten.
=== Main Axis - justify-content ===

=== Cross Axis - align-items ===
<pre>
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline
</pre>

← Nächstältere Version		Version vom 1. April 2021, 11:23 Uhr
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

@@ Zeile 54: / Zeile 54: @@
 == 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 ==

@@ Zeile 51: / Zeile 51: @@
 '''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.
 == Eigenschaften für Flex-Items align-content / align-self ==

@@ Zeile 47: / Zeile 47: @@
 '''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-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.
+'''flex-end''' richtet auf der anderen Seite aus.
 == Eigenschaften für Flex-Items align-content / align-self ==

@@ Zeile 8: / Zeile 8: @@
 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.'''
@@ Zeile 24: / Zeile 23: @@
 justify-content: space-evenly (not defined in the Flexbox specification)
 </pre>
 ==== 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.
@@ Zeile 29: / Zeile 29: @@
   flex-wrap: no-wrap; -> Standard
-=== Cross Axis - align-items ===
+==== Zwischenräume auffüllen ====
 <pre>
 align-items: flex-start
@@ Zeile 37: / Zeile 45: @@
 align-items: baseline
 </pre>
 == Eigenschaften für Flex-Items align-content / align-self ==

@@ Zeile 3: / Zeile 3: @@
 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 ==
+== Ausrichten von Flex-Boxen im Flex-Container ==
- 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.
+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.
 == 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).
+'''Mit justify-content verteilt man die Boxen in der Hauptrichtung.'''
@@ Zeile 17: / Zeile 22: @@
 justify-content: space-between
 justify-content: space-around
 justify-content: space-evenly (not defined in the Flexbox specification)
 </pre>
-=== Umbruch ===
+==== Zeilenumbruch ====
-Standardmäßig versucht Flex alle Boxen in eine Reihe zu quetschen
+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.
 === Cross Axis - align-items ===
 <pre>
@@ Zeile 31: / Zeile 38: @@
 </pre>
-Außerdem gibt es noch align-self und align-content. Mit '''align-self''' kann man das Ausrichten direkt auf das Item anwenden.
+== Eigenschaften für Flex-Items align-content / align-self ==
 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:

@@ Zeile 1: / Zeile 1: @@
   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
-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.
+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 vertikale wird zur horizontalen ausrichtung.
+== Align in Flex Container und flex-direction ==
 === Main Axis - justify-content ===
 <pre>
-justify-content: flex-start
+justify-content: flex-start -> Boxen
 justify-content: flex-end
 justify-content: center
@@ Zeile 20: / Zeile 20: @@
 justify-content: space-evenly (not defined in the Flexbox specification)
 </pre>
+=== Umbruch ===
 === Cross Axis - align-items ===
 <pre>
@@ Zeile 30: / Zeile 31: @@
 </pre>
 === Flex-Item-Distribution ===
 The align-content property takes the following values: