Horizontale Ausrichtung in flex

[Gabriele]

Hi,

ich schaffe es, items in einer flex-box links und rechts anzuordnen, wie aber das erste item links und das zweite zentriert in dem restlichen Platz?

[Gunnar Bittersmann]

@@Gabriele

ich schaffe es, items in einer flex-box links und rechts anzuordnen, wie aber das erste item links und das zweite zentriert in dem restlichen Platz?

Mein erster Gedanke war: mit justify-self: start fürs erste Item. Geht nicht.

MDN aufgemacht. TIL: „In Flexbox-Layouts wird diese Eigenschaft ignoriert. Lesen Sie mehr über Ausrichtung in Flexbox.“

Unter Ausrichtung und automatische Margen^[1] steht dann auch, wie’s geht: mit margin: auto fürs zweite Item. ☞ Beispiel

🖖 Live long and prosper

PS: Protip: Für Rahmen um Elemente beim Entwickeln nicht border, sondern outline verwenden, das verändert nicht das Layout.

---

1. „Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.“ Ähm, ja. „Margin“ wäre wohl mit „Abstand“ zu übersetzen. ↩︎

[Gunnar Bittersmann]

@@Gabriele

ich schaffe es, items in einer flex-box

Warum denn eigentlich Flexbox? Mit Grid geht

links und rechts anzuordnen, wie aber das erste item links und das zweite zentriert in dem restlichen Platz?

ganz intuitiv: vier Spalten – die erste und dritte Spalte für die Inhalte, so breit wie die Inhalte es brauchen, also auto; die zweite und vierte Spalte leer, die teilen den Rest der Breite unter sich auf, also 1fr. ☞ Beispiel

🖖 Live long and prosper