Astral Astrid: Flexbox-Element mit inline-block Eigenschaft?

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.

  1. Hallo Astral Astrid,

    Was ist mit box-sizing?

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. 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