• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Flexbox-Modell und Anordnung bei Seitenverkleinerung

G

gemini

Neues Mitglied
Hi,

ich beschäftige mich aktuell mit dem Flexbox-Modell und habe dabei ein kleines Problem, wenn ich die Seite verkleinere.
Zunächst erst mal ein minimaler Code:
Es werden dabei drei Boxen nebeneinander gesetzt, wobei die zwei äußeren Boxen eine feste Breite von 250 Pixel haben.

HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Beispiel</title>

        <style type="text/css">
            #container {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: flex-start;
                align-items: flex-start;
            }
           
            .sidebar {
                background: black;
                flex: 0 1 250px;
            }
           
            main {
                background: grey;
                flex: 1 1 auto;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="sidebar">
                Inhalt
            </div>
            <main>
                Viele ....
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                Zeilen
            </main>
            <div class="sidebar sidebar-right">
                Inhalt
            </div>
            </div>
        </div>
    </body>
</html>

Wenn ich das Browserfenster jetzt verkleinere, wird aufgrund des "flex-wrap: wrap;" natürlich irgendwann die rechte Box umgebrochen.
Das Problem was ich jetzt habe ist, dass die rechte Box jetzt ganz unten steht und zwischen ihr und Box 1 Platz gelassen wird.
Zum besseren Verständnis habe ich das mal aufgezeichnet, links ist der aktuell Zustand, rechts der Zustand, den ich gerne hätte:



Ich hoffe man versteht, was ich meine.
Schon mal Danke für eure Hilfe ;)
 
Danke schon mal die für Antwort.

Die Reihenfolge selbst passt ja. Es geht mir nur darum, dass bei einem Umbruch (wenn die Seite eine gewissen Breite unterschreitet), die Box 3 nicht direkt unterhalb der Box 1 ist, sondern eben erst auf der Höhe vom Ende der Box 2, neben der sie vorher stand.
 
Habe ich jetzt selber überlegen müssen. Ich arbeite eigentlich mit Grid-Layout anstatt Flexbox.

Erstelle einen Media-Query, der beim Umbruch die Klasse .sidebar auf flex: 0 1 auto und width: 100% ändert.
 
Das ist leider auch noch nicht ganz das, was ich zu diesem Zeitpunkt haben will, sondern erst, wenn die Bildschirmbreite noch kleiner wird.
So hat man dann den Aufbau:

Sidebar
Main
Sidebar

Ich will aber, dass bei einem "mittelgroßen" Fenster die rechte Sidebar direkt unter die linke rutscht, beide Sidebars aber noch links neben dem Main-Bereich stehen.
 
Mittelgroß gibt es nicht, sondern nur Breakpoints in Pixeln, welche Media-Queries triggern. Die musst du einsetzen, und dabei bedarfsweise Breiten und Reihenfolge der Elemente verändern.

Wenn du möchtest, dass dir jemand eine Lösung liefert, musst du es über die Jobbörse versuchen.
 
Hallo gemini

Ich will aber, dass bei einem "mittelgroßen" Fenster die rechte Sidebar direkt unter die linke rutscht, beide Sidebars aber noch links neben dem Main-Bereich stehen.
Zum Vergrößern anklicken....

Das funktioniert mit Flexbox leider nicht. Flexbox kann Container entweder nur vertikal oder nur horizontal anordnen.

Um die Container so anzuordnen benötigst du einen zusätzlichen Container um die beiden Sidebars, dem du dann ein zusätzliches display: flex; mit auf den Weg geben musst. Dazu müssen die beiden Sidebars im HTML-Quelltext direkt hintereinander angeordnet sein. Bloß dann kannst du die drei ursprünglichen Container nicht mehr bei großen Fenstern in der von dir vorgesehenen Reihenfolge nebeneinander anordnen.

Wenn du möchtest, dass dir jemand eine Lösung liefert, musst du es über die Jobbörse versuchen.
Zum Vergrößern anklicken....

Wieso so garstig? Mal davon abgesehen, das es keine Lösung gibt, hat gemini doch gar keine fertige Lösung gefordert. Sondern nur Hinweise zu einer möglichen Lösung.

Gruss

MrMurphy
 
@MrMurphy

Das war von mir nicht garstig gemeint, aber die Aufgabe ist schon etwas tricky.

Im Ausgangszustand gibt es drei Container, die nebeneinander stehen und eine Gesamtbreite von 100% haben. Dabei besitzen Container 1 und 3 eine feste Width und Container 2 eine variable. Beim Skalieren des Viewports soll es so aussehen wie auf dem zweiten Bild.

Wenn ich die Aufgabe lösen müsste, wäre mein erster Ansatz eine Kombination aus CSS und JavaScript unter Verzicht auf Flexbox. Dazu werden alle drei Container in ein gemeinsames Parent-Div gepackt und gefloatet. Container 1 und 3 erhalten eine Width von 250px, Container 2 calc(100% - 500px). Bei unterschreiten einer Viewport-Breite von 768px erhält das Eltern-Div eine CSS-Klasse mit float-left und Container 2 wird unterhalb des Parent-Divs verschoben.

Das wäre allerdings nur mein Fallback, weil ich resize()-Events aus Performance-Gründen möglichst vermeide. Aus dem Grunde würde ich mich in der zweiten Iteration tiefer mit dem Flexbox-Modell auseinandersetzen und zusätzlich noch schauen, ob ich eventuell mit dem Grid-Layout von Bootstrap weiterkomme (damit lässt sich die Reihenfolge von Containern auch verändern), um im Idealfall auf JavaScript verzichten zu können.

Ich würde das Problem auf die eine oder andere Weise sicherlich lösen. Aber das kostet Zeit, welche über normale Forumsaktivität hinausgeht, und deshalb mein Verweis auf die Jobbörse.
 
Auf JavaScript wollte ich eben aus den Performance-Gründen auch gerne an dieser Stelle verzichten.

Wenn das mit dem Flexbox-Modell so nicht so leicht umzusetzen ist, werde ich mir dann überlegen, ob ich entweder das Design etwas ändere, auf float umsteigen oder mir vlt. auch mal das von Tronjer angesprochene Grid-Layout genauer angucke.

Ich danke euch für die Antworten ;)

Noch ein Nachtrag:
Da ich mich selbst gerne mit solchen Sachen auseinandersetze und dann halt auch mal an der ein oder anderen Stelle scheitere, wo ein Profi vlt. noch mehr raus holen kann, dann ist das eben so. Dafür lerne ich aber was. Deshalb wäre es mir persönlich in diesem Fall kein Angebot in der Jobbörse wert.
Übrigens habe ich die Aussage von Tronjer persönlich auch gar nicht als garstig wahrgenommen ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben