display: flex; und der IE11

[Fred]

Hallo,

kann mir mal bitte jemand aufzeigen, warum der IE11 hier zicken macht. Die "figure" Elemente sollen mit "flex-flow: row wrap;" in die nächste Zeile fließen. Der IE11 stellt allerdings alle nebeneinander dar und schiebt das Design in die Breite.
Kurz zum Aufbau.

Body hat display flex,
nav, main und aside sind die flex-items in einer Reihe,
bei mittleren Viewportbreite wird Aside ausgeblendet,
bei kleiner Viewportbreite rutscht nav über main.

Auf dieser Seite kommt nun innerhalb von main ein div mit display flex, die figure sind die items. Der Firefox auf Win7 Chrome auf Samsung S4 stellen die Seite korrekt dar.
Der Validator zeigt no errors und bei "can I use" finde ich nicht passendes.

Gruß
Fred

[MrMurphy1]

Hallo

Ersetze mal probeweise "flex-basis: auto;" für figure durch "flex-basis: 40%;".

Gruss

MrMurphy

[Fred]

Hallo

Ersetze mal probeweise "flex-basis: auto;" für figure durch "flex-basis: 40%;".

Okay, er geht nicht mehr in die Breite, jetzt schieben sich aber je nach Viewportbreite die figure ineinander, siehe hier...

Gruß
Fred

[Fred]

Ich habe die Seite verschoben...

Gruß
Fred

[MrMurphy1]

Hallo

Neuer Lösungsansatz:

Bei den sechs Grafiken die inline-style-Angaben entfernen (style="..."). Die sollten grundsätzlich nicht mehr verwendet werden.

Bei figure flex-basis auf 40% ändern.

Bei figure "min-width: 0;" hinzufügen

Gruss

MrMurphy

[Fred]

Moin,

Bei den sechs Grafiken die inline-style-Angaben entfernen
2. Bei figure flex-basis auf 40% ändern.
3. Bei figure "min-width: 0;" hinzufügen

ich habe die drei Änderungen eingebaut und es geht, jetzt stellt sich mir allerdings die Frage warum. Warum gerade flex-basis 40% und wofür min-width 0?

Gruß
Fred

[MrMurphy1]

Hallo

die Frage warum

Das sind Erfahrungswerte, die ich durch Ausprobieren ermittelt habe. Die mir bekannten Anleitungen zu Flexbox umgehen solche Praxisprobleme leider. Sei es, weil die Autoren Theoretiker sind oder weil sie die Probleme zwar erkennen, aber selbst keine Lösung haben und sie deshalb verschweigen.

Ich bin eher ein Praktiker und deshalb an der Theorie weniger interessiert. Deshalb weiß ich auch nicht ob es sich um Fehler von Flexbox handelt oder das Verhalten so gewollt ist.

flex-basis 40%

Flexbox hat unabhängig vom gewählten Box-Modell wohl einige Eigenheiten mit der Behandlung von width/height, padding, border und margin.

Wenn zwei Container nebeneinander dargestellt werden sollen funktioniert dies mit flex-basis:50% im Zusammenspiel mit flex-wrap:wrap in der Praxis meist nicht. Der Wert muss so vorgegeben werden, dass höchstens zwei Container nebeneinander passen, aber eventuelle Abstände nicht dazwischenfunken. Also ein Wert zwischen 34% und 49%.

Ich habe mit den 40% die besten Erfahrungen gemacht. Dadurch rutschen immer zwei Container nebeneinander und werden durch das flex-grow:1 auf die gesamte Zeile vergrößert.

Wenn drei Container nebeneinander stehen sollen wähle ich einen Wert zwischen 26% und 33%. Und so weiter.

min-width 0

Dazu habe ich weniger Erklärungen, den Wert habe ich durch Ausprobieren ermittelt.

Ich bin bereits längere Zeit ein Fan von Flexbox. Dabei habe ich festgestellt, dass Grafiken innerhalb von Flexbox-Items meist nicht richtig skaliert werden. Entweder sie skalieren überhaupt nicht und es muss seitwärts gescrollt werden. Oder sie skalieren nicht probportional, sondern nur in der Breite.

Deshalb habe ich mich vor längerer Zeit einfach mal hingesetzt und ausprobiert, wie den Bildern in Flexbox-Items das Skalieren beigebracht werden kann. Dabei bin ich darauf gestoßen, dass die Angabe von min-width für die Flex-Items Abhilfe schafft.

Zunächst mit größeren Werten. Die mussten aber immer wieder für jede Webseite angepasst werden. Das nervt natürlich auf Dauer. Deshalb habe ich die Werte immer weiter verringert und dann zu dem Ergebnis gekommen, das min-width:0 vollkommen ausreicht. Die Flex-Items benötigen wohl nur den Hinweis, sich überhaupt mit min-width zu beschäftigen, damit sie in ihnen enthaltene Bilder proportional skalieren können.

Flexbox-Items sind die direkten Kind-Elemente von Flexbox-Containern.

Gruss

MrMurphy

[Fred]

Hi,

danke für die ausführliche Erklärung. Ich habe es noch auf einer anderen Seite (Zubehör) eingebaut (die 7 Grafiken am Ende der Seite) und habe da mal mit den Werten gespielt. Hab da was hinbekommen mit flex-basis: 15% und max-width:15%, wenn du mal schauen magst.

Ein anderes Thema mit display Flex hab ich erstmal aufgegeben, nix zu machen mit den IE. main sollte auch display flex bekommen, um auf diesem Weg einen Sticky Footer zu erhalten. Ich habe keinen workaround gefunden, bei dem nicht andere Fehler auftauchten. Es wäre schon schicker wenn hier der Footer bei großen Viewports (also mit aside) unten stehen würde. Vielleicht hast du ja eine Idee...

Gruß Fred

[MrMurphy1]

Hallo

wenn du mal schauen magst

Das scheint zu funktionieren.

main sollte auch display flex bekommen, um auf diesem Weg einen Sticky Footer

Kann es sein das noch Reste deiner Versuche im CSS herumgeistern?

Du hast leider einige CSS-Lösungen gewählt, die ich selbst nicht bevorzuge.

Du benötigst keinen Sticky Footer, sondern einen Footer, der unten im main-Container herumgeistert. Das ist ein kleiner aber feiner Unterschied.

Ich würde dafür folgende Lösung vorschlagen:

1. Lösche in der all.css folgende Einträge oder kommentiere sie wie in dem Beispiel aus:

@media only screen and (min-width: 55.0em) {                              /*large-Screen*/
...
main > article {
 /*-webkit-flex: auto;*/
 /*flex: auto;*/
 /*-webkit-order: 2;*/
 /*order: 2;*/
 }
main > header {
 /*-webkit-flex: none;*/
 /*flex: none;*/
 /*-webkit-order: 1;*/
 /*order: 1;*/
 }
main > footer {
 /*-webkit-flex: none;*/
 /*flex: none;*/
 /*-webkit-order: 3;*/
 /*order: 3;*/
 }
...
}

Das sollte an allen Webseiten erst mal nichts ändern.

2. Füge dann folgende Angaben in der all.css hinzu:

@media only screen and (min-width: 55.0em) {                              /*large-Screen*/
...
main {
   display: flex;
   flex: 1 1 1%;
   flex-direction: column;
}
main>footer {
   margin-top: auto;
}
...
}

Das ganze dann ausgiebig testen.

Gruss

MrMurphy

[Fred]

Hallo MrMurphy

Kann es sein das noch Reste deiner Versuche im CSS herumgeistern?

in der Tat.

Du benötigst keinen Sticky Footer, sondern einen Footer, der unten im main-Container herumgeistert. Das ist ein kleiner aber feiner Unterschied.

Ja richtig, ich hab nur keinen anderen Namen dafür, er klebt halt unten...

1. Lösche in der all.css folgende Einträge oder kommentiere sie wie in dem Beispiel aus:

kommt...

2. Füge dann folgende Angaben in der all.css hinzu:

@media only screen and (min-width: 55.0em) {                              /*large-Screen*/
...
main {
   display: flex;
   flex: 1 1 1%;
   flex-direction: column;
}
main>footer {
   margin-top: auto;
}
...
}

Das ganze dann ausgiebig testen.

Werde ich machen, aber wahrscheinlich erst am Montag, ich werde berichten.

Schönes Wochenende

Fred

[MrMurphy1]

Hallo

Gut, es werden noch ein paar Nacharbeiten notwendig sein.

Gruss

MrMurphy

[Fred]

Hallo MrMurphy,

neue Woche neues Glück, ich habe deine Vorschläge umgesetzt, auf den ersten Blick okay, ausgiebig testen steht noch aus. Im IE scheint es auch zu funktionieren, aber, ich liebe diese sch#*$$ Teil, irgendwie hat er Probleme mit dem Rahmen von main in dem Niemandsland zwischen article und footer. Da macht er den Rahmen breiter... Ah, ich sehe gerade, dass das nur ist, wenn der viewport kleiner wird als der body. Und bei mittleren viewports (ohne aside) ist der dickere Border unter dem Footer. Man sieht das hier.

Gruß

Fred

[Fred]

Hallo

Das Borderproblem hat sich erledigt. Ich habe den border vom main Element auf Nav und Aside verlagert.

Gruß

Fred

-- Tag ein, Tag aus, Webseiten-Entwickler beklagt monotone Arbeit.

[Fred]

Hallo,

wenn die Links in diesem Thread nicht mehr funktionieren, dann habe ich die Seite barth.gwfb.de an ihre entgültige Stelle verschoben. Das Endergebnis kann man dann unter www.barth.de sehen.

Gut, es werden noch ein paar Nacharbeiten notwendig sein.

@ MrMurphy, was für Nacharbeiten meinst Du?

Gruß
Fred

[MrMurphy1]

Hallo

Ich kann die fertige Seite nur eingeschränkt testen. Außerdem muss mein Lösungsansatz nicht unbedingt deinen Vorstellungen entsprechen.

Von daher hielt ich es für wahrscheinlich, dass noch Feinarbeiten erforderlich sind. Wenn nicht - umso besser.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Fred

wenn die Links in diesem Thread nicht mehr funktionieren, dann habe ich die Seite barth.gwfb.de an ihre entgültige Stelle verschoben. Das Endergebnis kann man dann unter www.barth.de sehen.

Kannst du dann nicht eine Weiterleitung einrichten, damit die Links auch weiterhin funktionieren? “Cool URIs don’t change.”

LLAP 🖖

[Fred]

Moin Gunnar

Kannst du dann nicht eine Weiterleitung einrichten, damit die Links auch weiterhin funktionieren?

leider nicht, ich werde die temporäre Subdomain barth in gwfb.de bald wieder löschen.

Gruß

Fred

[Gunnar Bittersmann]

@@Fred

Kannst du dann nicht eine Weiterleitung einrichten, damit die Links auch weiterhin funktionieren?

leider nicht, ich werde die temporäre Subdomain barth in gwfb.de bald wieder löschen.

Was dich nicht daran hindert, Weiterleitungen einzurichten, so dass die hier gesetzten Links weiterhin funktionieren und zu den dann richtigen Zielen führen.

LLAP 🖖

[Fred]

Was dich nicht daran hindert, Weiterleitungen einzurichten, so dass die hier gesetzten Links weiterhin funktionieren und zu den dann richtigen Zielen führen.

Kann ich das in www.gwfb.de machen? Dann muß ich mich da mal einlesen...

[Gunnar Bittersmann]

@@Fred

Was dich nicht daran hindert, Weiterleitungen einzurichten, so dass die hier gesetzten Links weiterhin funktionieren und zu den dann richtigen Zielen führen.

Kann ich das in www.gwfb.de machen? Dann muß ich mich da mal einlesen...

Sollte gehen. Du kannst ja auch von www.example.net nach example.net weiterleiten ohne dass eine Subdomain www angelegt wäre.

LLAP 🖖