Flexbox-Element mit inline-block Eigenschaft?

[Astral Astrid]

Hallo,

spiele mich gerade mit FLEXBOX und würde mich sehr freuen, wenn jemand eine Lösung für mein Problem hätte!

Ich habe zwei Elemente in einem Container mit display: flex; und flex-direction: column; Eigenschaft (Flexbox benötige ich, da ich die Reihenfolge der Elemente in weiterer Folge ändern will - soll hier nicht das Thema sein).

Nun möchte ich jedem dieser Elemente eine background-color verpassen, die allerdings nur und ausschließlich den tatsächlichen Inhalt des Elements umspannt (also eine klassische inline-block Sache). Nun scheinen flex Elemente aber als block Elemente ausgeführt zu sein, - auch display: inline-flex; bringt mich nicht weiter, da sich auch in diesem Fall der Hintergrund stets dem breiteren der beiden Elemente und damit immer noch der Breite des gesamten Container anpasst.

Wie schaffe ich es also, dass sich background-color nicht auf die gesamte Flexbox-Breite, sondern nur und ausschließlich auf die zu hinterlegende Element-Breite bezieht?

Danke für eure Stellungnahmen!

LG, AA.

[Matthias Apsel]

Hallo Astral Astrid,

Was ist mit box-sizing?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Was ist mit box-sizing?

Was soll damit sein?

Ich weiß nicht, was du und MrMurphy1 aus der Problembeschreibung verstanden habt, aber offenbar was anderes als ich. Ich denke, der Hintergrund des Inhalts der Flexitems soll sich so verhalten wie in diesem Beispiel – nur ohne die Schrägen.

LLAP 🖖

[Gunnar Bittersmann]

@@Astral Astrid

(Flexbox benötige ich, da ich die Reihenfolge der Elemente in weiterer Folge ändern will - soll hier nicht das Thema sein).

Du meinst, weil das schon das Thema in CSS Grid Layout and Accessibility ist?

“Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.”

Es ist ganz sicher ein Thema, wenn man die visuelle Reihenfolge so abändert, dass sie mit der Tab-Reihenfolge im Widerspruch steht.

Wie schaffe ich es also, dass sich background-color nicht auf die gesamte Flexbox-Breite, sondern nur und ausschließlich auf die zu hinterlegende Element-Breite bezieht?

Außer zusätzliches Markup fällt mir da erstmal nichts ein.

LLAP 🖖

[MrMurphy1]

Hallo

Nun scheinen flex Elemente aber als block Elemente ausgeführt zu sein

Nein, die haben spezielle Eigenschaften. Weder block noch inline-block noch inline.

Füge mal

display: flex;
flex-direction: column;

folgendes hinzu

align-items: flex-start;

Gruss

MrMurphy