Flex direction row und column kombinieren

    Hallo zusammen,

    ich bin am verzweifeln.

    kann ich mit Display: Flex ein Wort in die erste Zeile schreiben und ohne, dass die Zeile ausgefüllt ist, sollen die nächsten Elemente in einer Zeile drunter horizontal angeordnet werden..


    ich habe es so versucht, dass der Container der alle Elemente umfasst,

    display: Flex; 

    flex-direction: column;


    bekommen hat. Die einzelnen Elemente, die in der zweiten Zeile horizontal angeordnet werden sollen, habe ich

    flex-direction: row gegeben. Allerdings funktioniert es nicht. Die werden alle untereinander dargestellt.


    Ich hoffe ich konnte mein Problem verständlich schildern?!

    Hallo Firstlady,

    da das Projekt noch offline auf meinem Rechner ist, habe ich mal den Aufbau im codepen nachgebaut. https://codepen.io/dcst55/pen/LYpeLog


    Der Text soll in der ersten Zeile stehen. Die beiden farbigen Quadrate sollen unter dem Text horizontal nebeneinander dargestellt werden.

    Allerdings wird immer die Flex-Direction Eigenschaft des Containers auf alle Unterelemente herangezogen...


    Ich vermute ja stark, dass ich um einen weiteren div container nicht drumherum komme, aber das wollte ich tunlichst vermeiden, da ich nicht an die Template-Dateien rangehen möchte...

    Hallo dcst55

    Zitat von dcst55

    Der Text soll in der ersten Zeile stehen. Die beiden farbigen Quadrate sollen unter dem Text horizontal nebeneinander dargestellt werden.

    Hab da was ausprobiert. Dem Rundherum Container das: display:flex; weggetan. Da ist ja nur der Text.

    Einen zusätzlichen .container HTML & CSS reingetan. Ob das so OK ist, weiß ich nicht, schaut dann so aus:



    Liebe Grüße

    Christine

    Zitat von dcst55

    Ich vermute ja stark, dass ich um einen weiteren div container nicht drumherum komme, aber das wollte ich tunlichst vermeiden, da ich nicht an die Template-Dateien rangehen möchte...

    Ich fürchte, dass das die einzige Möglichkeit sein wird: Entweder den Text in ein Element setzen, das flex-basis: 100% bekommt, und dann dem Elternelement noch ein flex-wrap: wrap mitgeben, oder die beiden unteren Elemente in ein div setzen und außen flex-direction: column und innen row verwenden. Zwei unterschiedliche Werte für flex-direction im selben Element funktionieren nicht, und soweit ich das sehe, kannst du dem Text ohne Element auch nicht sagen, wie breit er sein soll.