zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 28.02.2021, 02:07
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 habe in einem anderen Forum ein Grid-Layout vereinfacht nachgebaut, dass einige Vorteile von CSS-Grid aufzeigen sollte.

Die Anforderung war: Auf der Seite gibt es zwei unabhängige Grid-Container, einer mit drei, einer mit zwei Spalten. Bei dem Container mit zwei Spalten soll die erste Spalte über zwei Spalten gehen. Die beiden voneinander unabhängigen Grid-Container sollen sich möglichst synchron verhalten.

https://www.html-seminar.de/forum/th...oter-anpassen/

Für die flexible, responsive Anordnung der Grid-Elemente sind im Endeffekt grade mal 5 CSS-Anweisungen erforderlich

Code:
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 0.5rem;

         grid-column: 1 / 3;

         grid-column: 3;
die 3 Größenangaben enthalten:

Code:
250px
1fr
0.5rem
Wer will kann als vierte Größenangabe noch die Breite in den media-queries nehmen.

Direkt zu dem Online-Beispiel, in dem die ersten drei CSS-Anweisungen nur der besseren Übersichtlichkeit doppelt vorhanden sind:

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

Das flexible, responsive Layout mit Flexbox, float, ... nachzubauen ist deutlich aufwändiger.

Das Beispiel sollte gut aufzeigen, wie CSS-Grid in diesem praktischen Beispiel Vorteile gegenüber Flexbox hat. Ich wüßte nicht, wie ich das textlich beschreiben kann.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 28.02.2021, 07:51
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 : )
Montag werde ich mir das genauer ansehen.


Bisher hatte ich ohne Erfolg nach Artikeln gesucht, wo ein einziges minimales Testmarkup mit zwei Varianten CSS - Flexbox und Grid - zu einem Layout gestaltet wird.


Damit ganz deutlich im Vergleich die Vor- und Nachteile der beiden Varianten hervortreten.


Du hattest ja selber schon die wichtigsten Vergleichskriterien genannt:

* Anzahl der nötigen Hilfscontainer ("Wrapper") (Sowieso semantisch sinnvolle Elemente, die zur Gruppierung eingesetzt werden und somit eh vorhanden sind, sind explizit nicht gemeint.)
* Anzahl der nötigen Margin-Angaben
* Anzahl der nötigen CSS-Angaben insgesamt (Komplexität)

Bei Dir lese ich bisher heraus, dass Du vermutlich Grid für besser hältst. Insbesondere, wenn man auf "Wrapper" im Markup verzichten möchte.
__________________

Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 28.02.2021, 09:46
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:
wenn man auf "Wrapper" im Markup verzichten möchte.
Zum guten HTML gehört im Quelltext alle unnötigen Elemente wegzulassen. Da das sinnvoll ist steht das inzwischen sogar in den HTML-Regeln.

Vielen Neulingen wird leider eingeredet trotzdem überflüssige Wrapper zu benutzen, da sonst die Hölle über sie kommt. Das funktioniert leider, die glauben dann ganz fest daran.

Dabei nicht vergessen: Jeder darf seine Webseite nach seinen Vorstellungen mit seinem Quelltext gestalten. Mit so vielen Wrappern wie es ihm gefällt. Das habe ich weder zu beurteilen noch gar zu verbieten. Ich kann nur aufzeigen wie Quelltext regelkonform und übersichtlich erstellt werden kann. Meine Lösung ist auch nicht immer die einzig mögliche.

Zitat:
Grid für besser hältst
Nein, solche Bewertungen führen häufig in die Irre. Im HTML und CSS selbst gibt es kein besser oder schlechter, wichtiger oder unwichtiger.

Bei bestimmten Layouts hat CSS-Grid Vorteile, bei anderen Flexbox und bei wiederum anderen sind beide überflüssig. Um das jeweils entscheiden zu können muss man die Möglichkeiten von CSS-Grid und Flexbox kennen.

Zeigen lässt sich das halt nur an Praxisbeispielen, die ich auch gerne erstelle, wenn ich dafür ausreichende Grundlagen und Zeit habe.
Mit Zitat antworten
  #14 (permalink)  
Alt 01.03.2021, 15:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen

Bisher hatte ich ohne Erfolg nach Artikeln gesucht, wo ein einziges minimales Testmarkup mit zwei Varianten CSS - Flexbox und Grid - zu einem Layout gestaltet wird.
Das wäre ein unsinniger Artikel und den wirst du deshalb auch nicht finden. Das ist wie wenn man fragt, wann man Auto oder Öffis verwenden soll... Mit beiden kommt man ans Ziel und manche verwenden nur eins davon.

Um einmal ein paar unklarheiten zu beseitigen: Flexbox ist für eindimensionale, Grid für zweidimensionale Layouts gedacht.
Heißt folgendes: Möchte man Elemente in einer Achse (horizontal oder vertikal) anordnen, dann flexbox. Möchte man Elemente horizontal UND vertikal in relation zueinander anordnen nimmt man grid.

Natürlich kann man auch mit grid nur in einer Achse arbeiten (mit nur einer Spalte / Reihe), dann erspart man sich flexbox ganz.

Ebenso kann man nur mit flexbox arbeiten, dann braucht es aber Hilfscontainer wenn es über zwei Achsen geht (und die einzelnen Elemente sind dann eventuell nicht schön angeordnet, bzw. man ist nicht so flexibel wie mit grid)

Nachdem flexbox in IE funktioniert und grid nicht wird oft ein reines flexbox Grid mit Containern vorgezogen. Da IE aber immer weniger Bedeutung hat wird vermehrt Grid eingesetzt (und die Container können verschwinden)
Mit Zitat antworten
  #15 (permalink)  
Alt 02.03.2021, 11:08
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

@cloned

Verstehe ich Dich richtig, dass Du also eindeutig Grid bei den sehr konkreten Anforderungen aus #1 den Vorzug geben würdest (Rücksicht auf IE soll nicht genommen werden)?

Denn wir haben ja Achsen sowohl horizontal als auch vertikal.


Was mir zum Verständnis bei "Flexbox oder Grid?" noch fehlt, sind ganz konkrete Vorteile von Flexbox gegenüber Grid.
__________________

Mit Zitat antworten
  #16 (permalink)  
Alt 02.03.2021, 14:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wie geschrieben, die Frage nach "Vorteil von Flexbox oder Grid" stellt sich so nicht wirklich, beides ist ein Hilfsmittel für ein anderes Vorhaben.
Flexbox wird von bootstrap und anderen Frameworks verwendet da es eben von IE unterstützt wird. Das ist der große Vorteil von flexbox.
Auch musst du immer bedenken, das ist oft historisch gewachsen. Flexbox ist ein paar Jahre vor Grid aufgekommen, das war damals schon eine revolution. Und selbst mit grid jetzt kannst du zB keine masonry-grids bauen, dafür gibt es dann bald (in Firefox jetzt schon) eine eigene weiterentwicklung von grid.

Nur mit grid kannst du auch alles das umsetzen was flexbox kann denke ich, aber wieso das grid mit 100 Parameter verwenden wenn flexbox es auch mit 10 kann für den einen Anwendungsfall.
Man kann und soll flexbox + grid ja auch mischen, das eine schließt das andere nicht aus.
Deinen header kannst du zb mit flexbox ausrichten, da braucht es kein grid im grid (meiner meinung nach)
Mit Zitat antworten
  #17 (permalink)  
Alt 02.03.2021, 15:01
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:
in Firefox jetzt schon
Spannend. Wo gibt es dazu Infos?

Zitat:
Nur mit grid kannst du auch alles das umsetzen was flexbox kann denke ich, aber wieso das grid mit 100 Parameter verwenden wenn flexbox es auch mit 10 kann für den einen Anwendungsfall.
Ich kenne das genau umgekehrt. Bei CSS-Grid sind weniger CSS-Anweisungen erforderlich.

Geändert von MrMurphy (02.03.2021 um 15:03 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 02.03.2021, 15:02
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

Nun gut, ich werde weiter zum Thema lesen.


Bisher ist es mir noch völlig unklar, wie man zu einer Entscheidung "Flexbox oder Grid" bei der in #1 vorgestellten Aufgabe gelangt, wenn man konkrete Kriterien festlegt, wie sie hier im Thread bereits genannt wurden:


* IE-Unterstützung ist unwichtig
* Anzahl der nötigen Hilfscontainer ("Wrapper") (Sowieso semantisch sinnvolle Elemente, die zur Gruppierung eingesetzt werden und somit eh vorhanden sind, sind explizit nicht gemeint.)
* Anzahl der nötigen Margin-Angaben
* Anzahl der nötigen CSS-Angaben insgesamt (Komplexität)


Aus Deiner letzten Antwort lese ich heraus, dass Du für den Header Flexbox verwenden würdest und für den Rest Grid.


Und ich lese heraus, dass man typischerweise für eine Lösung (von welchem Fall Du sprichst, ist mir nicht klar) mit Grid ca. 10mal soviel CSS benötigt wie für etwas Vergleichbares mit Flexbox.
__________________

Mit Zitat antworten
  #19 (permalink)  
Alt 02.03.2021, 15: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

Zitat:
mit Grid ca. 10mal soviel CSS benötigt wie für etwas Vergleichbares mit Flexbox
Tut mir leid: Aber das ist genau umgekehrt.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 02.03.2021, 15:53
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

Vielleicht erklärt @cloned ja noch, wie er die Aussage 100 ... 10 meinte?
__________________

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:17 Uhr.