Flexbox ohne "Wrapper"-Divs?
Moin.
Mit Flexbox habe ich bisher wenig Erfahrung. Nun habe ich folgende HTML5-Struktur: Code:
<body> 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. |
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. |
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. |
Zitat:
Zitat:
Zitat:
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 |
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? |
Zitat:
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:
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. |
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. |
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. |
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? |
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.
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 16:26 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023