Flexbox ohne "Wrapper"-Divs?

AndreasB · #1 (**permalink**) 26.02.2021, 13:16

Moin.
Mit Flexbox habe ich bisher wenig Erfahrung.

Nun habe ich folgende HTML5-Struktur:

Code:

<body>
    <div id="page">
        <header>
            <a id="logo">...</a>
            <form id="search">...</form>
        </header>
        <nav id="service">...</nav>
        <nav id="issue">...</nav>
        <main>...</main>
    </div>
</body>

Ist es mit diesem HTML, ohne "Wrapper"-Divs um die beiden Elemente nav und ohne "Wrapper"-Div um die beiden Elemente nav und das Element main, möglich, via Flexbox folgendes Layout zu erstellen?

https://borumat.de/-/bilder/html/flexbox.jpg

Wenn ich es richtig verstanden habe, kann man einzelnen flex-items ja über "flex-basis" eine Breite zuweisen, wenn man nicht möchte, dass sie sich "ergibt".

Hier soll ja der Header über die volle Breite laufen.

Ich würde mich sehr freuen, wenn ihr mir signalisieren könnt, ob das angedachte (schlichte) Layout mit Flexbox gut realisierbar ist. Und falls ja: ob man ohne umhüllende zusätzliche Container auskommt.

Main enthält übrigens längere Artikel zu Fahrradthemen. Die maximale Breite soll dort ca. 42em betragen. Bei der Gesamtbreite von #page dachte ich an 62em.

Sprungmarke wo main und nav nicht mehr nebeneinander, sondern untereinander dargestellt werden, ist zur Zeit 39em für main. Aber das sind ja letztlich unwichtige Details, das also nur am Rande.

Edit: Das Bild habe ich als Link eingefügt, weil es mir nicht gelungen ist, über die Einbettungsfunktion der Forensoftware eine kleine Darstellung zu erreichen.

MrMurphy · #2 (**permalink**) 26.02.2021, 16:04

Ohne Hilfscontainer ist mir so ein Layout mit Flexbox noch nicht untergekommen. Für solche Layouts ist CSS-Grid besser geeignet.

Auf Größenangaben sollte heutzutage so weit wie möglich verzichtet werden, die können die Browser grade bei CSS-Grid selbst gut berechnen. Die Navigation wird nur so breit wie der längste Eintrag, der Rest steht dem Inhalt zur Verfügung. Falls du dort sehr lange Links unterbringen willst, die dann umbrechen sollen, kannst du der Navigation eine maximale Breite mit auf den Weg geben.

Ich habe mal ein responsives, flexibles Online-Beispiel erstellt:

https://www.w3schools.com/code/tryit...e=GO2BTWSME9U1

Zum Testen auf den grünen "Run"-Button drücken. Du kannst zum Testen Änderungen direkt im Quelltext durchführen und mit "Run" ausprobieren. Die Breite der Seite änderst du am einfachsten durch Verschieben des Mittelstegs. Dabei wir auch direkt die Fenstergröße eingeblendet.

AndreasB · #3 (**permalink**) 26.02.2021, 18:12

Ganz herzlichen Dank erstmal für dein Online Beispiel. Ich finde leider erst morgen abend Zeit, es richtig anzuschauen.

Zu schade, dass Flexbox ohne die Hilfscontainer nicht geht.

Angenommen, man akzeptiert den Kompromiss der zwei zusätzlichen Hilfscontainer:

Seht ihr Vorteile bei Flexbox gegenüber Grid für die hier besprochene sehr geringe Anzahl an Elementen.

Zur Größenangabe:
Eine maximale Zeilenlänge für längere Texte ist ein wesentliches Usability-Merkmal.

MrMurphy · #4 (**permalink**) 26.02.2021, 18:33

Zitat:

Eine maximale Zeilenlänge für längere Texte ist ein wesentliches Usability-Merkmal.

Ja, aber dafür gibt es keine absoluten Werte, auch wenn das gerne behauptet wird. Und in meinem Beispiel ist die Zeilenlänge des main-Elements durch die maximale body-Elementbreite begrenzt. Das habe ich also berücksichtigt.

Zitat:

Angenommen, man akzeptiert den Kompromiss der zwei zusätzlichen Hilfscontainer:

Es ist nur ein zusätzlicher Hilfscontainer erforderlich.

Zitat:

Seht ihr Vorteile bei Flexbox gegenüber Grid für die hier besprochene sehr geringe Anzahl an Elementen.

Nein, genau umgekehrt. CSS-Grid hat in diesem Fall viele Vorteile gegenüber Flexbox.

Ob CSS-Grid oder Flexbox sinnvoller ist hängt nicht von der Anzahl der Container ab. Sondern von der Ausgangssituation und dem, was erreicht werden soll. Für die beiden Elemente in deinem header (Logo und Eingabefeld), die ich nicht berücksichtigt habe, wird Flexbox sinnvoller sein.

Ich hab noch mal ein Beispiel mit Flexbox erstellt, das ähnlich funktioniert wie das CSS-Grid-Beispiel:

https://www.w3schools.com/code/tryit...e=GO2L9QHJHT2A

AndreasB · #5 (**permalink**) 26.02.2021, 22:24

Danke auch für das zweite Online-Beispiel! Echt nett : )

Du schreibst, dass die Methode Grid Vorteile "in diesem Fall" gegenüber der Methode Flexbox hat.
Welche genau sind das bitte?

Gibt es objektive Kriterien, wann man der einen und wann der anderen den Vorzug geben sollte?

MrMurphy · #6 (**permalink**) 26.02.2021, 23:10

Zitat:

Welche genau sind das bitte?

Das lässt sich an einer Beispielseite ohne Inhalt nur ansatzweise erklären.

Die Container können ohne ansonsten nutzlose Hilfscontainer angeordnet werden. Dadurch wird zusätzlich der HTML-Quelltext übersichtlicher und pflegeleichter. Es sind weniger Abstandsangaben (margin) erforderlich. Die Breiten der Container passen sich besser ihrem Inhalt an. Zur Erstellung des Layouts sind weniger CSS-Angaben erforderlich.

Weitere Vorteile zeigen mit konkreten Inhalten, zum Beispiel bei Bildergalerien und Card-Layouts.

Zitat:

Gibt es objektive Kriterien, wann man der einen und wann der anderen den Vorzug geben sollte?

Ja, aber die lassen sich nicht im Rahmen des Forums erklären und hängen von der konkreten Webseite ab.

Das ist (natürlich übertragen) mit der Elektrik eines Hauses vergleichbar. Welche und wie viele Verteiler, Steckdosen, Schalter, Leitungen erforderlich sind hängt vom konkreten Gebäude ab. Die Frage: "Ich baue ein Haus, was für Elektrik muss ich einkaufen?" kann niemand beantworten.

AndreasB · #7 (**permalink**) 26.02.2021, 23:24

Hätte ja sein können, dass sich einige objektive Kriterien nennen lassen.

Die Inhalte der schlichten Website hatte ich ja genannt:

Logo
Suchfeld
Langer Artikel mit Fließtext ohne Gedöns.
Navi mit (5) Servicelinks (Über uns, etc)
Navi mit Links zu allen Artikeln einer Ausgabe des Fahrradmagazins

Du schreibst zum Grid-Layout:

1 es benötigt weniger Hilfscontainer
2 es benötigt weniger Margin-Angaben
3 die Breiten der Container passen sich besser ihrem Inhalt an
4 zur Erstellung des Layouts sind weniger CSS-Angaben erforderlich

Da fragt man sich natürlich, ob Flexbox irgendeinen relevanten Vorteil gegenüber Grid hat. Schwer vorstellbar bei dieser Aufzählung.

MrMurphy · #8 (**permalink**) 26.02.2021, 23:41

Die Vorteile von CSS-Grid waren auf meine Beispielwebseite bezogen und werden häufig zutreffen.

Ein Beispiel, wo ich Flexbox gegenüber CSS-Grid bevorzugen würde, ist zum Beispiel das Layout im header.

AndreasB · #9 (**permalink**) 26.02.2021, 23:52

Leider verstehe ich Deine Antwort noch nicht.

Treffen denn die von Dir erwähnten Vorteile des Grids 1-3 für den zweigeteilten Heade nicht zu?

MrMurphy · #10 (**permalink**) 26.02.2021, 23:55

Ich kann es nicht besser erklären. Dafür gibt es auch Bücher und entsprechende Internetseiten. Um die Unterschiede nachvollziehen zu können wirst du Flexbox und CSS-Grid lernen müssen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Script nur für Inhalt eines bestimmten DIVs	Kipperdesign	Javascript & Ajax	8	11.02.2013 13:03
DIVs wollen nicht in Container	Echnotron	CSS	4	22.02.2012 08:46
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
Höhenanpassung von divs	localex	CSS	1	21.11.2007 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32