[resolved] Hänger bei flex-Modell

[Arne Drews]

Hi,

Ich überarbeite gerade meine Layout-Struktur und möchte komplett auf flex gehen.

Dazu habe ich das Dokument in Header, Main und Footer eingeteilt. Ich hänge allerdings gerade bei den Header-Elementen. Im Prinzip soll es dort nur zwei Bereich geben, den oberen ( bspw. für Logo, Slogan, Bilder, etc. ) und einen unteren ( Navi ).
Wie auf der Abbildung zu sehen, möchte ich die beiden Container so aufbauen, dass der erste immer oben im Parent ist und der zweite immer unten.

Aber daran scheitert es gerade. Habe mir einiges im Netz angesehen, aber die Dinge, die dort funktionieren, funktionieren bei mir nicht. Die beiden Container "kleben" untereinander, wie gewöhnliche Blockelemente.

Der Aufbau sieht momentan so aus:

<div class="wrapper">

<header>
    <div>foobar</div>
    <div>
        <nav>
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </nav>
    </div>
</header>

<main>
    <!-- content -->
</main>

<footer>
    <!-- footer -->
</footer>

</div>

Das relevante CSS:

DIV.wrapper { display:flex; flex-direction:column; height:100%; }

HEADER { display:flex; flex-direction:column; align-content:space-between; justify-content:space-between; }
MAIN { flex:3; }
FOOTER { flex:1; }

HEADER > DIV { flex:2; align-self:flex-start; }
HEADER > DIV:last-child { flex:1; align-self:flex-end; }

Ich wollte den beiden Containern ungern eine feste Höhe geben.

Sicher kann mir ein Flex versierter einen Tipp geben, was ich falsch mache?

Danke

[hellbringer]

Ganz ist mir nicht klar, was du möchtest.

Sowas?

-----
Header
-----

Main Content


-----
Footer
----

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
div.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
header {
    background: red;
}
main {
    background: yellow;
    flex: 1;
    overflow: auto;
}
footer {
    background: green;
}

[lottikarotti]

Was es imho etwas einfacher macht den Überblick bei komplexen Layouts zu behalten ist die Verwendung von helper-Klassen (oder Attributen): flex-Layout Beispiel.

[hellbringer]

Was es imho etwas einfacher macht den Überblick bei komplexen Layouts zu behalten ist die Verwendung von helper-Klassen (oder Attributen): flex-Layout Beispiel.

Das macht aber den Vorteil von CSS zunichte, indem Content und Layout nicht mehr getrennt sind.

[lottikarotti]

Das macht aber den Vorteil von CSS zunichte, indem Content und Layout nicht mehr getrennt sind.

Jop. Es ist ein Kompromiss.

Die Verwendung eines Wrappers, der wie in diesem Fall nur fürs Layout gebraucht wird, hat diese Grenzen aber bereits verwischt. Meiner Meinung nach ist diese Trennung nicht immer so strikt umsetzbar wie die Theorie es vorsieht.

[hellbringer]

Die Verwendung eines Wrappers, der wie in diesem Fall nur fürs Layout gebraucht wird, hat diese Grenzen aber bereits verwischt. Meiner Meinung nach ist diese Trennung nicht immer so strikt umsetzbar wie die Theorie es vorsieht.

Stimmt schon. Aber man könnte trotzdem noch fast problemlos jedes beliebige Layout damit umsetzen. z.B. möchte man auf Mobile Devices keinen statischen Header und Footer, sondern den gesamten Bereich scrollbar. Das kann man sich abschminken, wenn man das Layout fix ins HTML-Code schreibt. Natürlich könnte man etwas tricksen, indem man die Attribute in zweifacher Ausführung schreibt und dann mit Media Queries oder sonstigen Techniken mal die und mal die anwendet. Aber damit kommt man auch irgendwann an die Grenzen und übersichtlich ist das dann auch nicht mehr.

[wario]

Ich glaube wenn ich den Ausgangspost richtig verstehe ist das Problem nicht der Aufbau eines Webseiten-Layouts mit Flexbox an sich, sondern das Verhalten der beiden Container innerhalb des Headers, oder?

[Arne Drews]

Ja richtig. Erstmal danke an alle, die sich hier damit beschäftigen.

Ausgehend von bspw. hellbringers Post #2 möchte ich nun im HEADER zwei flex-Container darstellen, von dem der erste immer oben, also quasi als flex-start und der untere immer unten im HEADER, also quasi flex-end dargestellt wird.

Ähnlich wie #2 habe ich es ja bereits, mir will es allerdings nicht gelingen, die beiden DIV innerhalb des HEADER entsprechend darzustellen.
Im Prinzip ist das, was ich möchte genau das, was ich mit dem Grundlayout schon mache. Aber innerhalb des HEADER will mir das nicht gelingen.

[lottikarotti]

Ähnlich wie #2 habe ich es ja bereits, mir will es allerdings nicht gelingen, die beiden DIV innerhalb des HEADER entsprechend darzustellen.
Im Prinzip ist das, was ich möchte genau das, was ich mit dem Grundlayout schon mache. Aber innerhalb des HEADER will mir das nicht gelingen.

Ich bin mir nicht sicher ob ich dich richtig verstehe (eine grafische Visualisierung des gewünschten Ergebnisses wäre von Vorteil), aber hier mal ein weiteres Beispiel. Hinweis: der Header hat eine fixe Höhe von 150px um das Verhalten zu demonstrieren.

[Arne Drews]

Jo, so in der Art habe ich das gemeint, danke für das Beispiel.
Ich habe das ganze nochmal von vorne begonnen und habe es dann doch ganz annehmbar hinbekommen.
Poste ich gerne mal später, vielleicht habt ihr ja noch Verbesserungstipps.

Danke

[derwunner]

Hallo,

also dafür brauchst du kein Flexbox Layout. Einfach nur ein Header, ein Subheader, einen Content Bereich und einen Sticky Footer geht auch ganz ohne Schwierigkeiten auf die herkömmliche Weise. Arbeite einfach mit Prozentwerten für die volle Breite und sowas.

lottikarotti Ich habe noch nie einen so komplizierten Flexbox Aufbau gesehen. Klar kann man in HTML5 eigene Elemente und Attribute definieren, aber wozu für einen Layout Aufbau? Gib den Boxen einfach Klassen und gut ist's.

PS: Ein schöner Guide für Flexbox, der mir auch recht geholfen hatte: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


MFG

derwunner

[lottikarotti]

also dafür brauchst du kein Flexbox Layout. Einfach nur ein Header, ein Subheader, einen Content Bereich und einen Sticky Footer geht auch ganz ohne Schwierigkeiten auf die herkömmliche Weise. Arbeite einfach mit Prozentwerten für die volle Breite und sowas.

Ich persönlich nutze nur noch Flexbox und sehe auch bei diesem Layout keinen Grund mit Prozentwerten herumzfummeln, wenn es auch dynamisch geht. Oder kennst du vorher die Höhe des Headers oder der Elemente die er beinhaltet?

lottikarotti Ich habe noch nie einen so komplizierten Flexbox Aufbau gesehen.

Das ist ein absolutes Basic-Layout.

Klar kann man in HTML5 eigene Elemente und Attribute definieren, aber wozu für einen Layout Aufbau? Gib den Boxen einfach Klassen und gut ist's.

Ich mag den deklarativen Ansatz und dieser hat sich das bei uns in der Praxis bewährt. Wobei mein Beispiel oben schon stark simplifiziert ist. Produktiv nutzen wir dafür eigene Angular & React Komponenten die auch deutlich mehr können (bspw. auf Bildschirmgrößen reagieren, etc.).

[rkr]

Wird eh bald(tm) alles durch css-grids abgelöst.

[Arne Drews]

Hi,

Ich habe um eine Ecke zu viel gedacht. Im Prinzip ist das, was lottikarotti in #9 gepostet hat, das was ich Anfangs wollte.
Um zu verstehen, wo mein Denkfehler war, sollte man wissen, dass die beiden Elemente innerhalb des Header der Header selbst ( bspw. Logo/Slogan, o.ä. ) und die Navigation darstellen sollten.
Die Navigation sollte halt immer am unteren Rand des äußeren Header "kleben".

Das ist aber eigentlich totaler Quatsch, denn ich kann ja auch die Navigation aus dem Header rausziehen. Dann wäre es egal, wie groß der Header an sich wird, die Navi ist immer direkt darunter.
Hier nur mal beispielhaft, wie der Aufbau jetzt ist: https://codepen.io/anon/pen/KQoPRB

Das ist nun der grundlegende Aufbau für mich und funktioniert natürlich, wie es soll.

also dafür brauchst du kein Flexbox Layout.

"Brauchen" sicher nicht, aber ein Web-Layout würde ich aktuell nur noch auf Flex basierend erstellen ( zumindest bis Grid ausreichend Browser-Support bietet ).

Ich mag den deklarativen Ansatz und dieser hat sich das bei uns in der Praxis bewährt. Wobei mein Beispiel oben schon stark simplifiziert ist. Produktiv nutzen wir dafür eigene Angular & React Komponenten die auch deutlich mehr können (bspw. auf Bildschirmgrößen reagieren, etc.).

Grundsätzlich finde ich die Möglichkeit auch nicht "falsch" oder umständlich. Ich nutze in CSS in bestimmten Fällen auch die Attribut-Selektion und empfinde das als sehr praktisch. Gerade in Deinem Fall mit React usw. macht das aber mehr Sinn. Dein Beispiel wäre imho auch mit "normalen" CSS-Klassen realisierbar. Aber das spielt für den Zweck keine Rolle, auch Dein beispiel hat mir geholfen umzudenken.

Danke für eure Teilnahme, ich habe dadurch das ganze nochmal von einer anderen Seite betrachten können.

Gruß Arne

[wario]

Den Header oder die Navigation ins Main mit rein und einen Aside sowie einen Media Query für den responsiven Umbruch dazu, dann bist du mit deinem Beispiel aus #14 beim Holy Grail Layout mit Flexbox .