zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 02.03.2021, 16:43
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

Verzeihung, hie rhabe ich mich sehr ungut ausgedrückt:
Ich meinte nicht weniger CSS als bei grid, sondern man hat weniger Parameter insgesamt zur Verfügung.

Auch meinte ich nicht den header mit flexbox und den Rest als grid, aber alles der Reihe nach:

https://developer.mozilla.org/en-US/...Masonry_Layout für infos bezüglich masonry layout. (habe ich aber noch nie verwendet, keine große Unterstütung... obwohl chrome will das auch implementieren soweit ich weiß)

Das mit 100 und 10 meinte ich eher so: In grid gibt es 100 verschiedene Parameter die man verwenden kann (nicht MUSS), in flexbox gibt es eine kleinere Anzahl. Die 100 und 10 hier sind einfach Hausnummern und nicht repräsentativ.
Bei flexbox habe ich: die Richtung, die Reihenfolge und den Abstand der Elemente.
Bei Grid habe ich: Die Reihen, die Spalten, die einzelnen Elemente in den Reihen + Spalten, die größe der Elemente, die Platzierung, etc. (also viel mehr, beide Listen haben keinen Anspruch auf Vollständigkeit)

Also kurz gesagt: Wenn ich nur die Ausrichtung von zB zwei Elementen brauche, wieso dann grid verwenden wenn mir flexbox ausreicht.
Code:
display: flex; justify-content: space-between;
Geht mit grid auch... aber wozu, sehe hier keinen Vorteil.
Vielleicht kein perfektes Beispiel, aber das meinte ich damit.
Ich würde nicht für den header flexbox verwenden, ich würde für die gesamte Seite grid verwenden und für die Zelle im Header (der Teil des Grids ist) dann flexbox (wenn die Elemente so an je ein Ende aufgereiht werden sollen)

Ich habe es nun zweimal versucht zu erklären wann man sich für grid und wann für flexbox entscheidet, woran mangelt es denn noch?
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 02.03.2021, 23:37
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

Damit jeder selbst über den Unterschied zwischen Flexbox und CSS-Grid beurteilen kann habe ich ein Testseite erstellt. Der header-Inhalt wurde einmal mit Flexbox und einmal mit CSS-Grid erstellt.

Unter header stehen im CSS die Anweisungen, die für Flexbox und CSS-Grid benötigt werden.

Unter .headerflex die nur für Flexbox benötigten Angaben:

Code:
   /*.headerflex*/
   @media all {
      .headerflex {
         display: flex;
      }
      .headerflex p {
         width: 250px;
      }
   }
Unter .headergrid die nur für CSS-Grid benötigten Angaben:

Code:
   /*.headergrid*/
   @media all {
      .headergrid {
         display: grid;
         grid-template-columns: auto 250px;
      }
   }
Link zur Online-Version: https://www.w3schools.com
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 03.03.2021, 07:38
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

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Damit jeder selbst über den Unterschied zwischen Flexbox und CSS-Grid beurteilen kann habe ich ein Testseite erstellt. [...]

Link zur Online-Version: https://www.w3schools.com

Danke!


Ich werde versuchen daraus ein minimales Testcase zu bauen, ganz frei von padding und margin, wo es allein um die Anordnung geht.

Dann wird vielleicht noch deutlicher, wo die Vor- und Nachteile von Flexbox vs. Grid im konkreten Fall liegen.

Dabei werde ich dann auch kein section verwenden, sondern wie in #1 zwei navs.
__________________

Mit Zitat antworten
  #24 (permalink)  
Alt 03.03.2021, 13:07
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.034
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

MrMurphy, das reicht noch nicht ganz, die Flexbox-Variante braucht auch justify-content: space-between;, margin-left: auto; auf dem p oder margin-right: auto; am figure. Viele Wege führen ans Ziel und keiner davon ist richtig oder falsch.

Ich tendiere dazu dort Flexbox zu nehmen, wo es ausreicht und Grid immer dann einzusetzen wenn es nötig ist. Es gibt sicher auch Fälle wo Flexbox sogar besser geeignet ist als Grid, leider will mir keiner einfallen.
Mit Zitat antworten
  #25 (permalink)  
Alt 03.03.2021, 13:32
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

Du hast mich nicht verstanden.

Mir ging es um die Angaben die "nur für Flexbox" und die "nur für CSS-Grid" erforderlich sind.

Die von dir genannten Angaben fallen unter

Zitat:
Unter header stehen im CSS die Anweisungen, die für Flexbox und CSS-Grid benötigt werden.
Die werden für das Layout bei beiden Möglichkeiten benötigt. Das ist auch direkt in meinem Beispiel nachvollziehbar.
Mit Zitat antworten
  #26 (permalink)  
Alt 03.03.2021, 13:43
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

@MrMurphy
Mir fällt es leider schwer, Deine Beispiele nachzuvollziehen. Das ist natürlich weder eine Kritik, noch eine versteckte Aufforderung an Dich, noch weitere Beispiele zu posten. Ich fand's voll nett, dass Du sie gepostet hast : )



Ich benötige jedenfalls zum Verständnis von Grid ein Beispiel, wo der ganze Feinschliff mit padding und margin außen vor bleibt.

Eine Lösung allein mit Grid. Mit Subgrid im Header.

Meine bisherigen Spielereien waren nicht von Erfolg gekrönt. Grid ist wirklich sehr komplex.
__________________

Mit Zitat antworten
  #27 (permalink)  
Alt 03.03.2021, 15:45
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.034
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

@MrMurphy Ich sehe, dass du sie für beide definiert hast, aber die Angabe ist für dein Grid nicht relevant. Ich habe es dir hier mal etwas eingekürzt.

Zitat:
Zitat von AndreasB Beitrag anzeigen
Ich benötige jedenfalls zum Verständnis von Grid ein Beispiel, wo der ganze Feinschliff mit padding und margin außen vor bleibt.
Wenn es um das Verständnis der Technik geht, kann ich dir die „A Complete Guide to …“ von CSS-Tricks nur wärmstens empfehlen:
A Complete Guide to Grid
A Complete Guide to Flexbox

Das ist zwar einiges an Text, aber es ist sehr anschaulich erklärt, welche Eigenschaften was genau bewirken.

Geändert von inta (03.03.2021 um 15:49 Uhr)
Mit Zitat antworten
  #28 (permalink)  
Alt 03.03.2021, 16:21
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

@inta
Danke, aber bei längeren Texten brauche ich was auf Deutsch.
__________________

Mit Zitat antworten
  #29 (permalink)  
Alt 03.03.2021, 16:44
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

Du kannst zB auf selfhtml schauen ob die da gute Infos haben. Nachdem ich auch alle Infos auf englisch beziehe kann ich dir da nicht weiter helfen. Nur so viel: Gerade beim flexbox artikel hast du viele Bilder die dir schon mal weiter helfen werden zusätzlich zum Text (Zumindest mir haben sie schon oft für das einfache Grundverständnis geholfen)
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 03.03.2021, 17:43
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:
Ich sehe, dass du sie für beide definiert hast, aber die Angabe ist für dein Grid nicht relevant. Ich habe es dir hier mal etwas eingekürzt.
Stimmt. Spannend.

Also sind für das einfache header-Layout mit Flexbox 3 spezielle Zeilen und für das Layout mit CSS-Grid zwei spezielle Zeilen erforderlich. Vorteil CSS-Grid.

Ich kann überhaupt nicht nachvollziehen was daran kompliziert sein soll. "display: grid;" sollte sich jeder Webseitenersteller merken können.

Das Schlüsselwort "grid-template-columns" prägt sich nach mehrmaligem Benutzen wohl auch ein. Wobei das bei der Suche nach "CSS-Grid" auch schnell zu finden ist. Für zwei Spalten dahinter dann zwei Werte. Das kann natürlich verwirren.

Das lässt sich zwar nicht auf alle Situationen übertragen, funktioniert aber in dieser Konstellation.
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:36 Uhr.