Zur Flexbox weitere Intems bzw Boxen hinzufügen

  • Hier wäre eine Begründung wünschenswert, warum Du an dieser Stelle Grid bevorzugst.

    Weil Grid sich für zweidimensionale Layouts (also die hier gefragte Anordnung von Elementen neben- und untereinander) besser eignet als Flex.

    Zitat

    Dadurch wird alles nur unnötig kompliziert und mit jedem Spanning entfernt man sich von der Semantik eines Grid.

    Wieso komplizierter? Das gewünschte Layout lässt sich ohne die in #8 genannten zusätzlichen Elemente umsetzen - es reicht ein Element außenrum (section oder article evtl.) und die gewünschten Elemente (Bild, Überschrift, 3 Textblöcke) darin.

  • Ausgehend von meinem Posting in #8 hier mal wie ich mir das vorstelle.

    Mit Flex:

    Code
        <section id="welcome">
            <img src="images/logo.png">
    
            <h1>welcome</h1>
            <div class="flex-container">
                <div class="flex-item">1</div>
                <div class="flex-item">2</div>
            </div>
            <div>3</div>
        </section>

    Und mit Grid:

    Code
        <section id="welcome">
            <img src="images/logo.png">
    
            <h1>welcome</h1>
            <div>1</div>
            <div>2</div>
            <div class="bottom">3</div>
        </section>
  • Ausgehend von meinem Posting in #8 hier mal wie ich mir das vorstelle.

    Ich hatte die gewünschte Darstellung nicht genau gelesen bzw. falsch verstanden. Ich war davon ausgegangen dass es quasi drei Spalten geben soll, links Block 1, rechts Block 2 (jeweils auf die ganze Höhe) und in der Mitte Bild, Überschrift und Block 3 - und das hätte sich mit grid-template-areas gut lösen lassen.

    Warum du jetzt allerdings immer noch flex bevorzugst obwohl das ja ein Element mehr braucht, ist mir nicht so ganz klar.

  • Zitat

    Warum du jetzt allerdings immer noch flex bevorzugst obwohl das ja ein Element mehr braucht, ist mir nicht so ganz klar.

    Wie früher schon geschrieben, es nimmt sich nichts. Mit jedem Spanning entfernt man sich von der Semantik eines Grid und das Layout wird unübersichtlicher.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!