Multi-Flexbox - vertikal zentrieren

  • Hallo,


    ich habe folgende Frage:
    Ich habe 2 Div-Elemente mit display:flex auf gleiche Höhe gebracht.
    Nun möchte ich aber innerhalb dieser zwei, nennen wir sie Haupt-Divs, weitere divs einfügen z. B. Bildergalarie ect. Diese sollten aber vertikal auf der gleichen Höhe sein. Hier ein Bild:


    [Blockierte Grafik: http://250kb.de/u/160624/j/5qvuoUwrA5NV.jpg]


    kann ich sagen, der rote div ist die basislinie und der schwarze soll auf die selbe höhe kommen bzw. eben dort anfangen?


    Der schwarze Div im rechten Div, soll auf die gleiche Höhe wie der rote Div kommen, dass es ordentlicher aussieht.
    Die Frage ist, kann ich denn innerhalb von 2 flex divs, eine solche Anordnung machen, oder muss ich jetzt mehrere display-flex divs untereinander anlegen?


    Hier mein Code:



    und der css:


  • Hallo


    Zitat

    Die Frage ist, kann ich denn innerhalb von 2 flex divs, eine solche Anordnung machen, oder muss ich jetzt mehrere display-flex divs untereinander anlegen?


    So wie ich deinen Text verstanden habe: weder - noch.


    Flexbox erstellt reine Eltern-Kinder-Beziehungen. Eltern = flex-container, Kinder = flex-items


    "2 flex-divs", also wahrscheinlich zwei flex-container, sind Geschwister und können nicht aufeinander reagieren.


    Mit "mehreren display-flex-divs", also mehreren flex-containern, meinst du wohl, dass der Quelltext zersplittert wird. Also in den ersten flex-container die beiden Überschriften und der erste Absatz. In den zweiten flex-container die beiden farblich hinterlegten Texte. Und so weiter. Damit könntest du zwar das von dir gewünschte Layout erreichen. Sachlich wäre der Quelltext aber totaler Unsinn - sowas geht gar nicht.


    Die Lösung ist einen flex-container zu erstellen. In den flex-container kommen für jede Spalte gleich viele div als flex-items. In die flex-items kommt dann der eigentliche Inhalt.


    In dem folgenden Beispiel ging es mir darum die Technik aufzuzeigen. Die Farben, Abstände, Rahmen, Schriften, Media Queries ... kannst / musst du dann deinen Vorstellungen anpassen.


    Das Beispiel ist für 4 flex-items in jeder Spalte ausgelegt. Weniger ist kein Problem, bei mehr muss das CSS erweitert werden.


    Korrektur: Das Beispiel funktioniert nur mit 4 flex-items in jeder Spalte. Bei weniger oder mehr muss das CSS angepasst / erweitert werden. Es können aber leere flex-items verwendet werden. Wenn dabei zwei "nebeneinanderstehende" (also zum Beispiel das 3. und das 7.) leer bleiben, werden sie nicht angezeigt.


    Bei width/height, padding, border, margin habe ich das Border-Box-Modell verwendet (box-sizing: border-box). Beim klassischen Content-Box-Modell müssen die Werte im CSS angepasst werden.


    Ich habe wie heutzutage üblich nur einen Klassennamen "zweispalten" verwendet und den Inhalt des flex-items mit Selektoren gestaltet. Den Klassennamen kannst du natürlich anpassen. Durch dieses Vorgehen wird der HTML-Quelltext übersichtlicher. Ein weiterer Vorteil ist, dass das CSS auch einfacher für andere Seiten verwendet werden kann.


    HTML:



    CSS:



    Ein Beispielquelltext für eine gesamte Seite:



    Und der Link zu einer Beispielseite zum direkten Ausprobieren:


    http://boratb.bplaced.net/index12.html


    Gruss


    MrMurphy

  • Hallo,


    DANKE! genau sowas habe ich gebraucht! du hast 7-8 stunden suche nun beendet! :thumbup: :thumbup: :thumbup: :thumbup: :thumbup: :thumbup: :thumbup: :thumbup:
    vielen vielen vielen DANK!


    gibt es zu dem thema ein tutorial, dass ich dass besser verstehe und später dann auch selbst bauen kann? flexbox und display:table waren ja alles falsche ansätze.
    p.s. kann ich eigentlich sagen: z. b. "div 1" ist ein parent und "div 2" (kind) soll die gleiche höhe haben wie "div 1"? geht sowas auch?

  • Hallo


    Zitat

    flexbox und display:table waren ja alles falsche ansätze.


    Flexbox war schon der richtige Ansatz, die konntest es nur noch nicht richtig verwenden.


    Zitat

    gibt es zu dem thema ein tutorial, dass ich dass besser verstehe und später dann auch selbst bauen kann?


    Ich kenne leider kein gutes. In den meisten werden nur die Grundeigenschaften von Flexbox erklärt. Da werden dann mehrere gleichgroße flex-items oder flex-items mit genau dem selben Inhalt / Text angeordnet. Also viel Theorie, wenig Praxis.


    Zitat

    p.s. kann ich eigentlich sagen: z. b. "div 1" ist ein parent und "div 2" (kind) soll die gleiche höhe haben wie "div 1"? geht sowas auch?


    So wie ich deine Frage grade verstehe - nein. div 2 kann div 1 natürlich voll ausfüllen, aber das wirst du nicht meinen.


    Ich habe mal eine Seite mit meiner Flexbox-Linksammlung erstellt. Das ist für mich einfacher als alle Links einzeln hier ins Forum zu klatschen. Wenn du dich etwas in Flexbox reingearbeitet hast und des englischen nicht so mächtig bist, sind trotzdem viele der englischsprachigen Videos interessant, da meist der Quelltext und das Ergebnis gezeigt werden:



    Gruss


    MrMurphy

  • Danke, da habe ich ne Menge zum lesen! :)


    Ach, kleine Zwischenfrage, dann muss ich kein neues Thema starten.
    Das HTML baut sich ja nach der Reihe im Quellcode auf - also von oben nach unten. Gibt es denn einen Code, dass z.b. die letze Zeile im Quellcode ganz oben auf der Webseite erscheint? z. b.



    HTML
    <div class="1"> ich bin ganz unten</div>
    <div class="2"> ich bin ganz oben</div>


    und auf der Webseite ist "ganz oben" trotz dass es im code unten steht, oben?

  • Okay danke. Ich dachte nur, dass ich so über medias z.b. die anordnung verschieben kann - dass z.b ein element im mobile unter einem steht, was im desktop vorher steht. :) nochmals danke. (ja, flexbox habe ich sowas gesehen, habe aber gedacht es ibt was "leichtes" wie der z-index) :)

Jetzt mitmachen!

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