nicht angemeldet
Google Chrome & Firefox display: flex
0 0 Zusatzfrage
Google Chrome & Firefox display: flex
Moin,
ich verstehe es schon wieder nicht, was der Firefox hat. Es geht um diese Seite http://jnnbo.bplaced.net/test123.php im Google Chrome passen die drei Boxen schön über die ganze Breite, im Firefox geht die letzte Box über den Rand. Wie kann das sein?
Laut http://caniuse.com/#search=flex geht "flex" in allen Browsern.
-
[...] im Firefox geht die letzte Box über den Rand. Wie kann das sein?
In welchem FF?
Im FF31 kann ich das Verhalten nicht reproduzieren.
Gruß Ole
-
Moin,
In welchem FF? Im FF31 kann ich das Verhalten nicht reproduzieren.
hab hier unter Windows 8.1 den Firefox in der Version 36.
-
hab hier unter Windows 8.1 den Firefox in der Version 36.
Wenn ich das recht deute sind deine Bilder der Verursacher. "max-width: 100%" greift hier nicht. Mache ich die Bilder kleiner sind die container auch nur groß wie sie sollen.
Gruß Ole
-
Wenn ich das recht deute sind deine Bilder der Verursacher. "max-width: 100%" greift hier nicht. Mache ich die Bilder kleiner sind die container auch nur groß wie sie sollen.
Das kann aber nicht der Sinn von den neuen CSS3 Eigenschaften sein, dass man erst etwas anderes anpassen muss um in den Genuss der neuen Eigenschaften zu kommen? Was mache ich dann, wenn die Seite resposive wird, die Bilder müssen sich irgendwie anpassen.
-
-
Hallo,
Dann verschwinden die Flex Eigenschaften wieder und ich gehe zurück auf float. Ich brauch etwas was zuverlässig ist.
-
-
Hallo,
du hast leider einige Probleme eingebaut.
Das Problem ist die Breite der article-container. Lösch mal "flex: 1 1 0;" und trage statt dessen ein "width: 33.3%". Dann kann sich die Breite der article dem übergeordnetem Element anpassen.
Allerdings gibt es dann ein weiteres Problem. Du hast fälschlicherweise den rechten Abstand der beiden linken Container mit einem padding-right hergestellt. Das wird von den 33.3% abgezogen und die beiden linken Spalten sind entsprechend schmaler, die beiden Bilder natürlich auch kleiner. Für einen Abstand von Elementen untereinander ist margin gedacht.
Korrekterweise musst du also das padding entfernen und durch ein margin ersetzen. Wobei die 33.3% entsprechend verringert werden müssen.
Wobei das Flexbox-Modell auch bei Breiten über 100% die Gesamtbreite auf 100% anpasst. Trotzdem ist es sinnvoll die Gesamtbreite selbst auf insgesamt 100% zu setzen, man weiß ja nie.
Wenn du padding benötigst sollte das für alle article gleich vergeben werden, damit die Breiten gleich bleiben, entsprechend dem border-box-Modell.
Gruss
MrMurphy
-
Hallo,
Das Problem ist die Breite der article-container. Lösch mal "flex: 1 1 0;" und trage statt dessen ein "width: 33.3%". Dann kann sich die Breite der article dem übergeordnetem Element anpassen. [....] Korrekterweise musst du also das padding entfernen und durch ein margin ersetzen. Wobei die 33.3% entsprechend verringert werden müssen.
Ok, habe ich geändert, meine Werte sehen nun so aus:
.leistung { margin-right:3%; width:31.3%; }Wenn du padding benötigst sollte das für alle article gleich vergeben werden, damit die Breiten gleich bleiben, entsprechend dem border-box-Modell.
Ok, auch den Wert habe ich nun geändert:
.container { margin-top:3em; display: -webkit-flex; display: flex; max-width:100% }Was ich allerdings nicht verstehe warum zeigten mir der Google und Chrome und der IE die Seite korrekt an? Durch das ändern der breite auf 31,3% bekommt nur der Firefox etwas mit die anderen zeigen es noch immer gleich an. Ich dachte immer alle Brwoser stellen dieses gleich da.
-
Hallo,
du hast leider einige Probleme eingebaut.
Nein. Der Code ist m.M.n. in Ordnung. Es handelt sich hier höchstwahrscheinlich um einen Browserbug.
Das Problem ist die Breite der article-container. Lösch mal "flex: 1 1 0;"
Wieso? flex-grow: 1 ist das, was hier angebracht ist. Das sorgt dafür das alle flex items die gleiche Breite haben. Das ist nämlich erwünscht und funktioniert im Chrome auch.
und trage statt dessen ein "width: 33.3%". Dann kann sich die Breite der article dem übergeordnetem Element anpassen.
Eine feste width zu setzen ist natürlich möglich aber damit handelt man sich nur Probleme ein, wie du auch schreibst:
Allerdings gibt es dann ein weiteres Problem.
Julius
-
-
-
-
-
-
Moin,
ich hab das Gefühl, dass ich "flex" nicht richtig verstanden habe. Auf meiner Seite http://jnnbo.bplaced.net/test123.php habe ich nun 9 Artikel eingefügt. Ich wollte immer drei in einer Reihe und dann geht es in der zweiten / dritten Reihe weiter. Kann das "flex" nicht?
-
Moin,
nutzt ja alles nichts, wenn es nicht richtig funktioniert. Deshalb habe ich das "flex" ersatzlos gestrichen und habe es so umgesetzt: http://jnnbo.bplaced.net/test123a.php
.container { margin-top:3em; width:100%; } .leistung { margin-right: 42px; width: 30%; display: inline-block; } .leistung:nth-of-type(3n) { margin-right:0%; }Ich habe von der neuen Technik einfach die Schnauze voll. Ein User bekommt von dem allen nichts mit, für eine Suchmaschine ist es egal wie ein Design aufgebaut ist und selber große Seiten, wie etwas Koeln.de laut http://validator.w3.org 143 Errors, 144 warning(s) interessiert auch kein Mensch. Eine Seite muss dem User zeigen was er haben möchte und kein Schönheitswettbewerb im Quelltext gewinnen, von dem keiner etwas mitbekommt.
-
Hi,
Ich habe von der neuen Technik einfach die Schnauze voll.
Du wirfst hier einiges durcheinander.
Wie du dein CSS Layout löst, ob mit Floats, inline-block oder Flexbox, ist dir und deinem Design überlassen. Nichts davon ist per se gut oder schlecht, richtig oder falsch. Es gibt höchstens Vor- und Nachteile.
Floats, inline-block usw. sind bekanntlich älter und besser unterstützt während bei Flexbox die Browser im Detail noch Bugs haben
Ein User bekommt von dem allen nichts mit, für eine Suchmaschine ist es egal wie ein Design aufgebaut ist und selber große Seiten, wie etwas Koeln.de laut http://validator.w3.org 143 Errors, 144 warning(s) interessiert auch kein Mensch.
HTML Code sollte valide sein und das ist idR auch einfach möglich bei HTML 5. Fehlerhafter HTML Code kann durchaus Usern und Suchmaschinen schaden!
Eine Seite muss dem User zeigen was er haben möchte und kein Schönheitswettbewerb im Quelltext gewinnen, von dem keiner etwas mitbekommt.
Das ist keine Frage von Schönheit sondern technischer Funktionsfähigkeit. Browser müssen Code korrekt einlesen und verarbeiten können. Davon bekommt letztlich der User etwas mit
Schönes WE Julius
-
-