nicht angemeldet
marctrix
marctrix
Fred
Fred
marctrix
Matthias Apsel
marctrix
marctrix
marctrix
Tabellenkalk
marctrix
Fred
marctrix
marctrix
Matthias Apsel
marctrix
Hej alle,
ich habe mich mal an einem einfachen Flexbox-Grid versucht. Der Weg scheint der richtige für moderne Webseiten, fast alles ist deutlich einfacher, als mit anderen Methoden, vieles nur mit flexbox überhaupt erst möglich.
Dennoch gibt es ein unschönes Problem.
In einem 980px breiten div möchte ich ein bis zwölf Spalten anzeigen lassen. Das scheint zu klappen.
Ich gebe dazu einem div eine Klasse mit dem Namen col, damit er eine Spalte "normaler" Breite bildet.
Soll ein div über zwei solcher Grid-Spalten gehen, nehme ich als flexbasis den doppelten Wert und lasse es auch doppelt so "schnell" wachsen.
Das führt zu dem erwarteten Ergebnis, dass Spalten mit colspan-2 genau doppelt so breit sind, wie die normalen Spalten. Damit das funktioniert habe ich von der verfügbaren Breite (980px) die gaps abgezogen (12 x 16px) und den Rest durch 12 geteilt - alles in
em
freilich.
Klappt so lange ich nicht verschieden breite Spalten miteinander kombiniere (z. B. colspan-4 und colspan-8) - diese sind minimal versetzt/nicht bündig.
Also habe ich irgendwo einen ziemlich doofen Denkfehler, den ich einfach nicht finde?
Marc
Hallo
einen ziemlich doofen Denkfehler
Ja.
Soll ein div über zwei solcher Grid-Spalten gehen, nehme ich als flexbasis den doppelten Wert und lasse es auch doppelt so "schnell" wachsen.
Das geht mit Flexbox nicht. Mit der flex-Anweisung, speziell flex-grow und flex-shrink, wird die Verteilung des Leerraums zwischen den Flex-Items bestimmt, nicht aber die Größe der Flex-Items.
Gruss
MrMurphy
Hej MrMurphy1,
einen ziemlich doofen Denkfehler
Ja.
Soll ein div über zwei solcher Grid-Spalten gehen, nehme ich als flexbasis den doppelten Wert und lasse es auch doppelt so "schnell" wachsen.
Das geht mit Flexbox nicht. Mit der flex-Anweisung, speziell flex-grow und flex-shrink, wird die Verteilung des Leerraums zwischen den Flex-Items bestimmt, nicht aber die Größe der Flex-Items.
Irgendwie verstehe ich das nicht: es klappt doch genau so, wenn alle Boxen in einer Reihe gleich breit starten und gleich schnell wachsen - auch wenn man 1/3 zu 2/3 miteinander kombiniert, baer dann halt nur fast - es fehlt immer nur ein bisschen...
Marc
Hallo
es fehlt immer nur ein bisschen...
Das scheint dich doch zu stören?
Flexbox ist grundsätzlich nicht für Grid-Systeme gedacht. Sondern ganz im Gegenteil soll es flexible Lösungen ermöglichen. Grids sind aber grade nicht sehr flexibel.
Für Grid-Systeme ist das in der Entwicklung befindliche CSS-Grid gedacht.
Flexbox soll Lösungen ermöglichen bei denen es grade nicht auf jeden Pixel ankommt.
Du willst Flexbox also genau für das Gegenteil verwenden, für das es erdacht wurde.
Dazu musst du Flexbox einer seiner wichtigsten Eigenschaften berauben. Und das ist die Leerraumverteilung.
Für (im Prinzip) starre Grid-Systeme darfst du also keine Leerräume zulassen. Du musst dich also mit der Leerraumverteilung von Flexbox beschäftigen.
Gruss
MrMurphy
Hallo MrMurphy,
Mit der flex-Anweisung, speziell flex-grow und flex-shrink, wird die Verteilung des Leerraums zwischen den Flex-Items bestimmt, nicht aber die Größe der Flex-Items.
Bist du da sicher, ich habe das anders gelesen und verprobt...
https://wiki.selfhtml.org/wiki/Flex-grow#flex-grow
http://on-design.de/tutor/html5_css3/css3/flexbox.html#flex_grow
Fred
Hallo
Bist du da sicher
Ja.
ich habe das anders gelesen und verprobt...
Das kann nicht sein.
Die Beschreibung bei On-Design ist falsch und bei SelfHTML musst du auch das Kleingedruckte lesen:
Beachten Sie: Genau genommen legt flex-grow nicht die anteilige Breite der Elemente fest, sondern teilt den noch verfügbaren Raum anteilig zwischen den vorhandenen Elementen auf.
Der "noch verfügbare Raum" ist der Leerraum zwischen den Flex-Items.
Mein Hinweis, dass flex-shrink auch den Leerraum verteilt ist hingegen falsch. flex-shrink wird ja grade aktiv, wenn kein zu verteilender Leerraum zur Verfügung steht. Da habe ich einfach flex-grow und flex-shrink gedanklich zu sehr verzahnt.
Gruss
MrMurphy
Hallo
Beachten Sie: Genau genommen legt flex-grow nicht die anteilige Breite der Elemente fest, sondern teilt den noch verfügbaren Raum anteilig zwischen den vorhandenen Elementen auf.
Der "noch verfügbare Raum" ist der Leerraum zwischen den Flex-Items.
In meinem Fall gibt es keinen Leerraum und das Flexitem mit der Angabe "flex:2 1 auto;" ist genau doppelt so breit wie die mit "flex:1 1 auto;"
Gruss
Fred
Hej Fred,
Hallo
Beachten Sie: Genau genommen legt flex-grow nicht die anteilige Breite der Elemente fest, sondern teilt den noch verfügbaren Raum anteilig zwischen den vorhandenen Elementen auf.
Der "noch verfügbare Raum" ist der Leerraum zwischen den Flex-Items.
In meinem Fall gibt es keinen Leerraum und das Flexitem mit der Angabe "flex:2 1 auto;" ist genau doppelt so breit wie die mit "flex:1 1 auto;"
Bei einem Grid braucht man ja Abstände - aber vielleicht macht es Sinn, diese in die Spalten zu legen - oder die Überlegung mit Werten für flex-Basis ungleich auto oder 0 war falsch. Ich bleibe mal dran - wenn jemand noch eine Idee oder ein funktionierendes Beispiel hat: gerne.
Und wird Bootstrap 4 nicht auch ein grid auf Basis von Felsbox anbieten?
Ich bin noch nicht überzeugt, dass es nicht geht.. ;-)
Marc
Hallo marctrix,
Und wird Bootstrap 4 nicht auch ein grid auf Basis von Felsbox anbieten?
Eine Felsbox ist viel zu stabil.
Bis demnächst
Matthias
Hej Matthias,
Hallo marctrix,
Und wird Bootstrap 4 nicht auch ein grid auf Basis von Felsbox anbieten?
Eine Felsbox ist viel zu stabil.
Oh Mann - die Puddings und Martins, sowie Bootstrab hatte ich schon entfernt, aber die Felsbox übersehen (Was ist eigentlich ein Bootstrab?)...
Marc
Oh Mann - die Puddings und Martins, sowie Bootstrab hatte ich schon entfernt, aber die Felsbox übersehen (Was ist eigentlich ein Bootstrab?)...
Hi Marc,
ich vermute bei Bootstrab eine Geschwindigkeitsangabe für Wasserfahrzeuge, um eine Unterscheidung zum Boots-Galopp zu ermöglichen.
Gruß der Buchhalter
Hallo,
Was ist eigentlich ein Bootstrab?...
ich vermute bei Bootstrab eine Geschwindigkeitsangabe für Wasserfahrzeuge, um eine Unterscheidung zum Boots-Galopp zu ermöglichen.
Übrigens ganz schwierig vom Bootstölt zu unterscheiden!
Gruß
Kalk
Hallo
Bei den meisten Angaben von Flexbox geht es um die Verteilung des Leerraums.
Ich bin noch nicht überzeugt, dass es nicht geht..
Klar geht es. Du darfst halt keinen Leerraum zulassen. Anders kann das bei Bootstrap auch nicht gelöst werden.
Oder du musst halt den Anteil des Leerraums passend anteilig verteilen, wofür Flexbox aber grade nicht vorgesehen ist. Der Leerraum soll FLEXibel verteilt werden und nicht starr wie in einem Grid-System.
Ich habe mir noch keine Gedanken gemacht ob das Verteilen des Leerraums in Flexbox in einem Grid-System funktioniert, da Flexbox und Grids eher Widersprüche sind.
Flexbox ist doch grade dazu geeignet auf Grid-Systeme zu verzichten. Seitdem Flexbox in der Praxis verwendet werden kann sind Frameworks wie Bootstrap, Yaml und Co. für visierte Webseitenersteller doch Geschichte. Das CSS schrumpft locker um mehr als die Hälfte und die Seiten werden flexibler.
Deine Testseite ist für Flexbox zudem schlecht gewählt, da Flexbox auch auf den Inhalt eines Containers reagiert. Es wäre besser, du würdest die Container (jeden einzeln) mit UNTERSCHIEDLICHEN Blindtexten füllen. Zur Auflockerung ein paar Bilder wäre noch praxisorientierter. Ansonsten fliegt dir dein Grid spätestens beim ersten Praxiseinsatz um die Ohren. Flexbox = flexibel.
Gruss
MrMurphy
Hej MrMurphy1,
Bei den meisten Angaben von Flexbox geht es um die Verteilung des Leerraums.
Ich hatte gedacht, den geschickt verteilt zu haben ;-)
Ich bin noch nicht überzeugt, dass es nicht geht..
Klar geht es. Du darfst halt keinen Leerraum zulassen. Anders kann das bei Bootstrap auch nicht gelöst werden.
Wie gesagt: den Ansatz werde ich mal weiter verfolgen.
Deine Testseite ist für Flexbox zudem schlecht gewählt, da Flexbox auch auf den Inhalt eines Containers reagiert. Es wäre besser, du würdest die Container (jeden einzeln) mit UNTERSCHIEDLICHEN Blindtexten füllen. Zur Auflockerung ein paar Bilder wäre noch praxisorientierter. Ansonsten fliegt dir dein Grid spätestens beim ersten Praxiseinsatz um die Ohren. Flexbox = flexibel.
Ja, einen Schritt nach dem anderen - ich möchte nach und nach austesten, was möglich ist.
Marc
Hallo
In meinem Fall gibt es keinen Leerraum
Seltsame Logik. Eher gar keine Logik. So nach dem Motto:
Ich habe die Schärfe von verschiedenen Chilisorten geprüft. Die haben gar keine Schärfe.
Wie war denn dein Rezept?
Brot mit Butter und Käse.
Und wieviel Chili?
Ich habe kein Chili verwendet.
Wenn du in deiner Verprobung keinen Leerraum zulässt kann natürlich auch keiner verteilt werden. Dann kannst du an Hand deiner Verprobung aber auch keine Aussagen über die Verteilung von Leerraum tätigen.
Und das marctrix den Leeraum für sein Grid-System mit Flexbox weglassen muss habe ich ja geschrieben.
Gruss
MrMurphy
Hej MrMurphy1,
Und das marctrix den Leeraum für sein Grid-System mit Flexbox weglassen muss habe ich ja geschrieben.
Das war der entscheidende Tipp. Das Problem scheint zu sein, dass ich für die margins feste Werte vergeben habe (1em)
Wenn man Zwischenräume braucht, lassen sich die wohl nur mit leeren Boxen erreichen - ziemlich oll..
Den margin mittels einer transparenten border oder einem padding zu faken, hat leider auch nichts gebracht - auch hier stören die festen Werte bei der Aufteilung der Boxen - man müsste also den in Boxen enthaltenen Elementen Abstände geben - mal sehen, ob sich darüber ein produktiv verwertbares Grid realisieren lässt...
Aber die Experimente haben zu noch einer interessanten Erkenntnis geführt - dass es überhaupt Bündigkeiten gab, lag nur daran, dass 980 ein Vielfaches von 16 ist - es war also nur Zufall, dass es überhaupt bündige Elemente gab.
Muss mal schauen, wie Bootstrap das macht (falls die das machen). Danke schon mal fürs Mitdenken!
Marc
PS: Was den Missbrauch von Eigenschaften für Zwecke angeht, für die sie nicht gedacht sind: machen wir das nicht ständig? ;-)
Hallo,
dass 980 ein Vielfaches von 16 ist
magst du mir das vorrechnen?
Gruß
Kalk
Hej Tabellenkalk,
dass 980 ein Vielfaches von 16 ist
magst du mir das vorrechnen?
Ähm... - habe jetzt keine Zeit, mache ich später mal ;-)
Marc
Hallo,
Ähm... - habe jetzt keine Zeit, mache ich später mal ;-)
du meinst, ein Teil deiner Antwort würde uns verunsichern?
Gruß
Kalk
Hallo
Wenn man Zwischenräume braucht, lassen sich die wohl nur mit leeren Boxen erreichen - ziemlich oll..
Was erwartest du? Du willst Flexbox für etwas verwenden, für das es überhaupt nicht erdacht ist (ganz im Gegenteil) und wunderst dich dann, das deine Erwartungen nicht erfüllt werden?
Wenn ich mit einem Fahrrad zum Kieshändler fahre, 5 Tonnen Sand kaufe und das Fahrrad für den Rücktransport mit dem Sand überkippen lasse ist es verschwunden und der Rücktransport entfällt. Ist deshalb das Fahrrad Schrott gewesen? Oder hatte ich vielleicht doch eher unrealistische Erwartungen?
Gruss
MrMurphy
Seltsame Logik. Eher gar keine Logik. So nach dem Motto:
Ich habe die Schärfe von verschiedenen Chilisorten geprüft. Die haben gar keine Schärfe.
Wie war denn dein Rezept?
Brot mit Butter und Käse.
Und wieviel Chili?
Ich habe kein Chili verwendet.
Was war das jetzt?
Ich habe mir meine Testseite nochmal angesehen und gespielt, es wird der verbleibende Inhalt innerhalb der Items im Verhältins 2:1 verteilt. http://codepen.io/anon/pen/wWprXg
Fred
Hallo
Wenn du mit "verbleibenden Inhalt" den Leerraum meinst - dann ja. Das ist genau das was ich die ganze Zeit schreibe.
Wobei du dir über die Auswirkungen ähnlich mit marctrix wahrscheinlich nicht im klaren bist.
Gruss
MrMurphy
'n abend
Wenn du mit "verbleibenden Inhalt" den Leerraum meinst - dann ja. Das ist genau das was ich die ganze Zeit schreibe.
Ich denke nicht, du schreibst von dem Abstand zwischen den Elementen, also zwischen den Flex Items. In dem Codepen ist zwischen den Flexitems kein "Leerraum", es ist der Leerraum innerhalb der Flexitems, der aufgeteilt wird.
Wobei du dir über die Auswirkungen ähnlich mit marctrix wahrscheinlich nicht im klaren bist.
Ich denke schon.
Gruss
Fred
Hallo
Ich denke nicht, du schreibst von dem Abstand zwischen den Elementen, also zwischen den Flex Items.
Genau.
In dem Codepen ist zwischen den Flexitems kein "Leerraum"
Doch. Den siehst du nur nicht mehr weil Flexbox bereits aktiv ist. Nachdem der Leerraum verteilt ist, ist er natürlich weg.
es ist der Leerraum innerhalb der Flexitems, der aufgeteilt wird.
Falsch. Wobei es natürlich nur Leerraum gibt, wenn die Fensterbreite des Browsers oder zumindest der umgebende Flex-Container größer als die Breite der Flex-Items in einer Zeile. Aber davon gehe ich aus wenn wir uns über Leerraum unterhalten.
Ich denke schon.
Nach dem was du schreibst leider nicht.
Gruss
MrMurphy
Moinsen,
In dem Codepen ist zwischen den Flexitems kein "Leerraum"
Doch. Den siehst du nur nicht mehr weil Flexbox bereits aktiv ist. Nachdem der Leerraum verteilt ist, ist er natürlich weg.
Okay, wenn man es so betrachtet muß ich dir recht geben.
Gruß
Fred
Sorry, zu schnell (und daher Quatsch) gepostet, daher Inhalt gelöscht...
Hej MrMurphy1,
Beachten Sie: Genau genommen legt flex-grow nicht die anteilige Breite der Elemente fest, sondern teilt den noch verfügbaren Raum anteilig zwischen den vorhandenen Elementen auf.
Der "noch verfügbare Raum" ist der Leerraum zwischen den Flex-Items.
Der wird aber doch nicht willkürlich verteilt, sondern im Verhältnis, das man mit flex-grow vorgibt...
Zoe Mickey Gillenwater demonstriert hier das Problem und hat mich hier mit Ihrer Lösung auch auf die Idee eines flexiblen Grids gebracht - mir geht es nicht um die Pixel sondern um die Bündigkeit.
Ich glaube inzwischen auch, dass es an den Abständen liegt - ich werde mal mit padding statt margins experimentieren...
Marc
Hallo
und hat mich hier mit Ihrer Lösung
Das kann ich nicht nachvollziehen. Zoe Mickley Gillenwater beschreibt doch grade das Verhalten von Flexbox, das ein pixelgenaues Grid-System verhindert.
Ich glaube inzwischen auch, dass es an den Abständen liegt - ich werde mal mit padding statt margins experimentieren...
Das hat weder etwas mit padding noch mit margin zu tun. Es geht um den Leerraum zwischen den Elementen. padding und margin gehörten jedoch zu den Elementen.
Gruss
MrMurphy
Hej MrMurphy1,
Hallo
und hat mich hier mit Ihrer Lösung
Das kann ich nicht nachvollziehen. Zoe Mickley Gillenwater beschreibt doch grade das Verhalten von Flexbox, das ein pixelgenaues Grid-System verhindert.
Es geht immer noch nicht um pixelgenau, sondern um vorhersehbares Wachstum im angegebenen Verhältnis zueinander. So dass man an vorhersagbaren Punkten bündige Kanten erzielen kann - in sehr simplen Fällen klappt das ja auch.
Ich werde mich mal hinsetzen und sehen, was machbar ist und wo die Grenzen sind.
Über das Ergebnis berichte ich dann.
Ich glaube inzwischen auch, dass es an den Abständen liegt - ich werde mal mit padding statt margins experimentieren...
Das hat weder etwas mit padding noch mit margin zu tun. Es geht um den Leerraum zwischen den Elementen. padding und margin gehörten jedoch zu den Elementen.
Ohne padding und margin verhält sich das Grid aber wie erwartet - an den Stellen wo ich bündige Kanten wünsche, kriege ich sie hin, wenn ich auf die Gaps im Grid verzichte. Nun sind die aber eigentlich nötig und ich werde mal experimentieren, um zu sehen, wie ich zum gewünschten Ergebnis komme...
Marc
Hallo MrMurphy1,
Die Beschreibung bei On-Design ist falsch und bei SelfHTML musst du auch das Kleingedruckte lesen:
Das klingt, als wäre aus deiner Sicht noch einiges auf diesem Gebiet zu tun. Hast du Zeit und Lust uns ein wenig zu unterstützen?
Bis demnächst
Matthias
Hej alle,
Also habe ich irgendwo einen ziemlich doofen Denkfehler, den ich einfach nicht finde?
Wirklich ein doofer Fehler: einfach alle flex-items in einen gemeinsamen Container, dann läuft es wie gewünscht - Probleme gibt es "nur" wenn man mehrere Zeilen benötigt, aber dafür gibt es dann auch eine Lösung: flex-boxen ineinader verschachteln.
"Probleme" gibt es nur noch, wenn in schmalen Spalten Wörter stehen (oder Elemente wie Bilder), die nicht hineinpassen. Aber die machen immer Probleme und müssen individuell behandelt werden...
Marc
Hallo
"Probleme" gibt es nur noch, wenn in schmalen Spalten Wörter stehen (oder Elemente wie Bilder), die nicht hineinpassen. Aber die machen immer Probleme und müssen individuell behandelt werden...
Das sollte kein großes Problem sein.
Überlangen Worten kannst du mit
­
bedingte Trennstriche hinzufügen. Dazu suche mit mittels der "regulären Suche" alle Worte über einer bestimmten Buchstabenzahl (meist 14, 15 oder 16 Buchstaben) und füge ihnen einen bedingten Trennstrich hinzu. Das reicht in der Regel. Das sind in einem normalen Text meist weniger als 10 Worte.
Und Bilder kannst du mit
max-width: 100%,
veranlassen nicht breiter als der umgebende Container zu werden.
Gruss
MrMurphy