Flexboxen - align-content und align-items

[Rolf B]

Hallo alle,

auf Grund der Änderungen einer IP am Wiki-Artikel CSS/Eigenschaften/align-content habe ich mich nochmal mit dem Thema auseinandergesetzt - das ist nämlich tatsächlich nicht so ganz einfach.

Nach einem ersten Überarbeiten von CSS/Tutorials/Flexbox/Ausrichtung - Ausrichtung entlang der Querachse brauche ich nun ein Beispiel, das die Zusammenhänge verdeutlicht. Und wenn einen so der Wahnsinn mal gepackt hat...

Guckt mal hier - sicherlich noch nicht fertig, und auf kleinen Bildschirmen nicht brauchbar.

Es enthält zwei geschachtelte Flexboxen. Die äußere (blaues Outline) besteht aus einer h2 Überschrift und einem div Element, das wieder eine Flexbox ist (rotes Outline).

Für die blaue und rote Flexbox kann align-content und align-items auf verschiedene Werte gesetzt werden. Aktiviert man baseline oder last baseline, werden zusätzliche Hilfslinien eingeblendet, die die Text-Baseline visualisieren (oh Boy, das war Gebastel, bis das im Firefox und Chrome gleiche Ergebnisse hatte).

Äh, baseline? last baseline? Whut?! CSS Box Alignment Level 3 lässt grüßen. Es gibt auch first baseline, aber das ist synonym zu baseline. Laut Mozilla ist die Unterstützung bei Chromia noch mau, aber bei mir hat es schon prima funktioniert. Pale Moon dürfte darob nur die Stirn runzeln. Die Spec macht vage Andeutungen, dass es eine "innere" und eine "äußere" Baseline für Boxen gäbe, weshalb ich zwei Flexboxen geschachtelt habe, um das ergründen zu können.

Jedenfalls hat das h2 Element links grüne Hilfslinien und zwei der Paragraphen im Textbereich haben rot gestrichtelte Hilfslinien, auf der ersten und der letzten Zeile. Dazu haben die beiden linken Textboxen noch einen kleinen Füll-::before drin, damit man von der baseline-Ausrichtung auch was merkt.

Erkenntnisse:

• align-content hat in der blauen Flexbox keinerlei Wirkung. Das ist Spec-Konform. Ich hab's nur dringelassen, weil ich beim Firefox irgendwann mal zu sehen glaubte, dass ein align-content Wert für die blaue Flexbox das Layout kaputtmachte.
• align-items wirkt in der blauen Flexbox bei stretch/start/center/end wie erwartet. Überschrift und die rote Flexbox werden gestreckt oder oben/mittig/unten angeordnet. Die rote Flexbox natürlich als eine Einheit.

Die rote Flexbox bitte erstmal wieder auf unset und unset setzen.

• align-content hat in der roten Flexbox nur dann Wirkung, wenn flex-wrap eingeschaltet ist. Das ist Spec-konform. Solange die blaue Checkbox auf "check-align:unset" bleibt, hat die rote Flexbox auch die volle Höhe (weil unset wie stretch wirkt).
• align-items vergrößert die Textboxen bei unset/stretch auf volle Höhe, und bei start/center/end werden sie innerhalb ihrer Flexbox-Reihe positioniert. Die beiden baseline-Einstellungen richten die ersten bzw. die letzten Zeilen aneinander aus. Solange align-content den stretch nicht verhindert, sieht man aber auch sehr deutlich, dass last baseline den Inhalt an der Unterkante der Box ausrichtet, während baseline ihn in Richtung der Oberkante ausrichtet.

Wo ist nun der Unterschied zu align-content? Man setze es auf start, center oder end. Nun wirken die Einstellungen bei align-items immer noch, aber die Bewegung ist viel geringer, weil die Flexbox-Reihen niedriger geworden sind!

Spannend ist nun die Interaktion der Baselines von blauer und roter Flexbox.

blau=baseline,rot=baseline: SELF und die erste Textzeile fluchten baseline, last baseline: SELF und die letzte Textzeile der oberen Box fluchten!

Soweit sogut, dies tun Chrome und Firefox identisch. Aber nun:

blau=last baseline, rot=baseline:

• Chrome: HTML fluchtet mit der ersten Zeile der unteren Textboxreihe
• Firefox: HTML fluchtet mit der ersten Zeile der oberen Textboxreihe

blau=last baseline, rot=last baseline:

• Chrome: HTML fluchtet mit der letzten Zeile der unteren Textboxreihe
• Firefox: HTML fluchtet mit der letzten Zeile der oberen Textboxreihe

Wer hat den Bug? @Gunnar Bittersmann, kennst Du das?

Und ich frag mich - wie vermittelt man all das in einem Tutorial?

Rolf