Firefox und CSS Flexbox

[Gunther]

Hallo Mathias,

sorry - ich hatte gestern einen Termin und musste weg. Hat etwas länger gedauert ...!

Da es sich um ein "Responsive Layout" handelt, verwende ich (natürlich) Prozentwerte.

Firefox unterstützt durchaus Prozentwerte für flex-basis: http://codepen.io/molily/pen/bLgcv

Ja klar, aber eben nur wenn die "neue" Version aktiviert ist. Ansonsten "versagt" dein Beispiel.

Noch einmal meine Bitte: Zeig mal den konkreten Flexbox-Code, den Firefox nicht unterstützt.

Kurze Erklärung vorweg:
Es geht hier speziell um 4 "Boxen", die je nach Viewportgröße (MQ)

• alle untereinander
• je 2 nebeneinander
• alle 4 nebeneinander
  angeordnet sind.

  
<div>  
	<div class="box_wrapper">  
		<div class="box_item">  
			...  
		</div>  
		<div class="box_item">  
			...  
		</div>  
	</div>  
  
	<div class="box_wrapper">  
		<div class="box_item">  
			...  
		</div>  
		<div class="box_item">  
			...  
		</div>  
	</div>  
</div>  

Ich hoffe, dass ist jetzt der gesamte relevante Teil ... ;-)

  
.box_wrapper {  
	display: -moz-box;  
	-moz-box-direction: normal;  
	-moz-box-orient: horizontal;  
	-moz-box-pack: justify;  
	-moz-box-align: stretch;  
  
	display: flex;  
	flex-direction: row;  
	flex-wrap: wrap;  
	justify-content: space-between;  
	align-content: center;  
	align-items: stretch;  
}  
  
.box_item {  
	width: 49%;  
	margin: 0 0 2rem;  
}  
  
@-moz-document url-prefix() {  
	.box_wrapper {width: 100%;}  
	.box_item {width: 45em; -moz-box-flex: 1; flex: 0 1 auto;}  
	.box_item:first-child {margin-right: 2.0rem;}  
}  

Mit dieser "Variante" zerfällt dann das Layout natürlich, wenn man die neuere Flexbox Version aktiviert.

Wenn das neue Flexbox aktiviert ist, werden die alten CSS-Eigenschaften ignoriert und die neuen umgesetzt – wo ist das Problem?

Das Problem ist, dass die alte Version eine Width-Angabe mit einer Weite >= max. Breite des Elements in einer Einheit ungleich Prozent benötigt, um zu funktionieren. Aber mit diesen Einstellungen "funktioniert" dann die neue Version nicht ("überlappt" das nachfolgende Element - die Flex-Boxen als solche "funktionieren").

Und da 'width' nichts mit der Flexbox-Syntax zu tun hat, kann man im CSS nicht zwischen alter und neuer Variante unterscheiden. Ergo funktioniert bei mir also (bis jetzt zumindest) immer nur eine Version.

Im übrigen gehören die "Hauptelemente" der Seite jeweils auch zu einer 'vertikalen' Flexbox.
Getestet habe ich das bis jetzt mit Chrome, Safari, Opera und IE10. In allen Browsern "funktioniert" es wie gewünscht.

Übrigens ist eine Feature-Abfrage mit JavaScript einfach:
'flex' in document.body.style

Das ist ja zur Abwechslung mal einfach ... - danke!
Frage ich mich, warum die das nicht im Modernizr Skript machen!? Die testen auf 'flexWrap', um zwischen alt und neu zu unterscheiden. Und da der Firefox wrap auch in der neuen Version nicht beherrscht, kommt als Ergebnis immer 'no-flexbox flexboxlegacy' heraus.

Gruß Gunther