zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox ohne "Wrapper"-Divs?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.02.2021, 13:16
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.373
AndreasB wird schon bald berühmt werden
Standard Flexbox ohne "Wrapper"-Divs?

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.
__________________


Geändert von AndreasB (26.02.2021 um 13:23 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.02.2021, 16:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.097
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.

Geändert von MrMurphy (27.02.2021 um 08:36 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.02.2021, 18:12
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.373
AndreasB wird schon bald berühmt werden
Standard

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.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 26.02.2021, 18:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.097
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (26.02.2021 um 21:22 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 26.02.2021, 22:24
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.373
AndreasB wird schon bald berühmt werden
Standard

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?
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 26.02.2021, 23:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.097
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.02.2021, 23:24
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.373
AndreasB wird schon bald berühmt werden
Standard

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.
__________________


Geändert von AndreasB (26.02.2021 um 23:50 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 26.02.2021, 23:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.097
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 26.02.2021, 23:52
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.373
AndreasB wird schon bald berühmt werden
Standard

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?
__________________

Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.02.2021, 23:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.097
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:37 Uhr.