CSS Woher kommt der Abstand?

[Hendoul]

Hi

Probiere mich grad mal wieder an flexbox nach längerer Abstinenz:
https://jsfiddle.net/GarfieldKlon/ahkL8evu/

Ich verstehe nicht woher der Abstand zwischen item1, item2 und item3 kommt. Warum ist da so ein fetter gelber Raum dazwischen?

Ich bin davon ausgegangen, dass wenn ich align-items: flex-end benutze, dann alles soweit nach unten rutsch wie möglich?

 

[Nafi]

Wenn dein Fenster breit genug ist, dann sind item1, item2 und item3 in einer Zeile ohne Abstand.

Ist dein Fenster nicht breit genug um alle drei Flächen nebeneinander darzustellen, rutscht Rot und Grün nach oben:

Um das zu lösen, genügt z.B. ein align-content: flex-end;

alternativ kannst du natürlich auch flex-wrap entfernen vom Container entfernen, dann sind die items in einer Zeile und werden gestaucht.

 

[Hendoul]

Aber woher kommt der Abstand wenn man align-items: flex-end benutzt?

 

[Anteru]

Dein gelber Block hat eine Höhe von 300 px. Das wird in zwei Zeilen à 150 px zerteilt, und da Dein roter/grüner/blauer Block nur 100 px hoch ist, ist da eben eine Lücke von 50 px. Sieht man z.B. sehr gut im Firefox wenn Du den Flexbox "Inspektor" benutzt.

 

[Hendoul]

Kannst du das etwas genauer erläutern oder hast du eine gute Quelle die das tut?
Wenn ich das richtig im Kopf habe wird ja nur bei grid etwas an Linien ausgerichtet, bei flex gibt es einfach eine main und cross Achse, aber wo die durchläuft ist doch egal? Und es wird auch nichts direkt an ihr ausgerichtet, sie dient einfach als 'Orientierung' bei row bzw. column?

 

[ger.ruler]

Was für Linien ? Deine Box ist 300px hoch und dein flex items 100px.... macht nach Adam Riese 100px Differenz bei 2 gewrappten Zeilen.... bzw dann 50 in der ersten und 50 in der zweiten

 

[Hendoul]

Ok, dann ist es eher das Prinzip mit den flex lines bei align-content das ich noch nicht wirklich verstehe.

 

[ger.ruler]

Aber woher kommt der Abstand wenn man align-items: flex-end benutzt?

Also align-items richtet den Inhalt der Zeile an der "eigenen" Cross-Axis aus (als wäre jede Zeile ein eigener Container). Daher bedeutet für dich flex-end, dass die Items am unteren Ende jeder Zeile ausgerichtet werden. Daher auch der Space von 50px in deiner 2. Zeile.

Bei align-content wird der Inhalt ganzheitlich ausgerichtet. Betrifft auch nur multi-line-container. Daher auch kein Space zwischen den Zeilen, aber Richtung flex-start dann umso größer (100px um genau zu sein).

Hilft dir das weiter ?

 

[Hendoul]

Ja es hat schon mal geholfen, dass jede neue Zeile ein eigener Container darstellt mit wieder eigenen Achsen. Bin aber immer noch dran das align-content ganz zu verstehen. Ich lese immer wieder, dass das die Linien ausrichtet, aber ich verstehe noch nicht welche Linien. Ob es da dann mehrere gibt oder nur eine?

 

[ger.ruler]

Also falls du sowas hier meinst: "flex container’s lines" ... dann sind nicht "Linien" gemeint, sondern die einzelnen Zeilen die beim Umbruch entstehen....

Versuch dir ein Quadrat mit 3 Linien (Zeilen) vorzustellen. Flex-start rückst diese nach oben, center zentriert sie in der Mitte und flex-end Richtung unterer Rand. Die Begrifflichkeit lässt sich als Eselsbrücke gut ableiten -> align-content: CONTENT ausrichten (innerhalb des Quadrats) .... align-items: ITEMS ausrichten (innerhhalb der Zeile).... vlt etwas stumpf xD aber nach ein paar Malen hast du es raus....

 

[Hendoul]

Und die 3 Linien/Zeilen in deinem Beispiel rühren daher, dass es auch wirklich 3 Zeilen mit items hat? Und dann werden die einfach 'zusammengezogen' und an den entsprechenden Ort verschoben und dann von dort aus ausgerichtet?

 

[ger.ruler]

Die 3 Zeilen entstehen, wenn die Größe deiner Flex-Items den Flex-Container zum Umbruch zwingen. Auch nur dann lässt sich align-content nutzen. Auch benötigst du Platz zum Ausrichten. Wenn dein Container kleiner ist, als die 3 umgebrochnen Zeilen, dann ist auch align-content start und end sinnfrei ^^

 

[netzgestaltung]

Hier gibts mmn alles über flexbox, wo auch alle optionen schön dargestellt werden:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

[netzgestaltung]

Hier gibts ebenfalls einige erhellende Beispiele:
https://philipwalton.github.io/solved-by-flexbox/