Einsatz von FLEXBOX / Präfix

[Schnippel]

Hi Leute,

wie setzt ihr heute schon Flexbox ein?
Ich arbeite mich da gerade ein. Was im FF und Chrom gut ausschaut, ist bei Safari und IE teils die reinste Katastrophe.

siehe hier

Da ich mit SCSS arbeite, habe ich mir dafür MIXINS wegen der ganzen Präfixe erstellt.
Wo kann der Fehler liegen?

/* ###############
   Flexbox-Modell 
   	Präfixe
	############# */

@mixin display_flex {   /* @include display_flex;  */
	display: -webkit-box; 
	display: -ms-flexbox;
	display: -webkit-flex; 
	display: flex;
} 

@mixin flex($grow_shrink_basis){  /* @include flex(0 1 24%);   ** entsprechende Werte einsetzen*/
  -webkit-box-flex: $grow_shrink_basis;
     -moz-box-flex: $grow_shrink_basis;
	  -webkit-flex: $grow_shrink_basis;
      	  -ms-flex: $grow_shrink_basis;
        	  flex: $grow_shrink_basis;
}
@mixin flex-direction($Wert) {  /* @include flex-direction(column);  oder row etc. */
	-webkit-flex-direction: $Wert;
		-ms-flex-direction: $wert;
			flex-direction: $Wert;
}
@mixin flex-flow($wert1, $wert2) {  /* @include flex-flow(column, wrap);  oder row, nowrap etc. reverse */
 	 -webkit-flex-flow: $wert1 $wert2; 
  		 -ms-flex-flow: $wert1 $wert2; 
  			 flex-flow: $wert1 $wert2;
}


/* ############### */

/*- !!!!!  funktioniert nicht !!!!! Flexbox justify-content -*/

@mixin justify-content(space_between) { /* @include justify-content(space_between); */
		-webkit-box-pack:justify;
    	   -ms-flex-pack:justify;
         justify-content:space-between;
}
@mixin justify-content(space-around) { /* @include justify-content(space-around); */
		-webkit-justify-content:space-around;
       			  -ms-flex-pack:distribute;
          	    justify-content:space-around;
}
@mixin justify-content(flex-start) { /* @include justify-content(flex-start); */
		-webkit-box-pack:start;
 -webkit-justify-content:flex-start;
      	   -ms-flex-pack:start;
         justify-content:flex-start;
}
@mixin justify-content(flex-end) { /* @include justify-content(flex-end); */
		-webkit-box-pack:end;
 -webkit-justify-content:flex-end;
      	   -ms-flex-pack:end;
         justify-content:flex-end;
}
@mixin justify-content(center) { /* @include justify-content(center); */
 		-webkit-box-pack:center;
 -webkit-justify-content:center;
       	   -ms-flex-pack:center;
         justify-content:center;
}

Die Präfixe habe ich von folgenden Seiten:

http://pleeease.io/play/
http://autoprefixer.github.io/

[Spooky]

Poste einen Link zur Seite und gib an in welchen Browsern in welchen Versionen es nicht funktioniert.

[FloB]

Lass die Prefixes weg! Schau dir lieber das hier an: caniuse.com/flexbox und lass' nur bei wirklichem Bedarf nen Autoprefixer (http://autoprefixer.github.io/) drüber laufen oder nutze fertige Mixins wie http://compass-style.org/reference/c.../css3/flexbox/ bzw. http://smarchal.com/sass-flexbox/ bzw. https://css-tricks.com/snippets/css/.../#flexbox-sass

Auf den ersten Blick sehe ich im Code übrigens "justify-content(space_between)" – was wahrscheinlich "space-between" sein sollte, oder?

[mlweb]

Insgesamt kann man Flexbox sehr gut einsetzen. Probleme kenn ich nur bei Safari 5 unter Windows. Der wird aber für Windows nicht mehr weiter entwickelt und wird meines Wissens unter Windows auch kaum anzutreffen sein. Außerdem bereitet der vorinstallierte Android-Browser bei älteren Android Geräten gelegentlich Probleme. Auf CanIUse als Quelle für solche Informationen wurde ja schon verwiesen.
Ich nutze für die ganzen Präfixe zum Beispiel die Library von Bourbon.

[Schnippel]

Hier der Link zur Seite

Probleme gibt es im IE11 und Safari (über Windows PC)

[Spooky]

Hier der Link zur Seite

Probleme gibt es im IE11 und Safari (über Windows PC)

Siehe caniuse.com/flexbox, wie FloB schon erwähnt hat.

• IE11 hat sehr viele Bugs diesbezüglich, die müsstest du dir im Detail ansehen und dein CSS bzw. Layout dementsprechend anpassen.
• Safari für Windows unterstützt flexbox wahrscheinlich gar nicht.

[mlweb]

• Safari für Windows unterstützt flexbox wahrscheinlich gar nicht.

Unter Windows läuft Safari 5 oder 5.1 als letzte Variante. Da wird aber nur die alte Flexbox Spezifikation unterstützt die mit dem oben angegebenen Mixin nicht mit abgefangen wird, prinzipiell funktioniert das also schon.

[mlweb]

Ich hab mir das verlinkte Beispiel gerade mal angeschaut.
Auf den ersten Blick ist mir aufgefallen, dass es etwas schwierig ist durchzusteigen, weil durch die vielen Präfixes und mediaqueries es mir als "Fremden" schwer fällt, genau das alles in den Entwicklerwerkzeugen anzupassen, was ich für relevant empfinde.
Ich würde meine Testdatei also zunächst ohne mediaqueries aufbauen und für die Tests im IE 11 auch ohne Präfixe arbeiten. Der kann das nämlich auch so.

Dann ist mir aufgefallen, dass Deine flex-Werte für die Items in meinen Augen etwas gewöhnungsbedürftig sind.
Ich habe mal der Einfachheit halber nur die äußere Flexbox bei großem Bildschirm angeschaut.
Der Flex-Container hat

.mein_flexcontainer {
flex-flow: row wrap;
}

Das erste Item

.item_1 {
flex: 1 1 100%;
}

Kann sich also ausdehnen und auch kleiner werden bei einer Basis-Breite von 100%.

Das zweite und dritte Item

.item_2 {
flex: 6 1 50%;
}

.item_3 {
flex: 6 1 48.7%;
}

Können sich auf das 6fache ausdehen und auch verkleinern bei einer Basis von 50% bzw. 48.7%

Für das 4. Item gibt es keine Angaben. Also sollte das Standardverhalten greifen flex: 0 1 auto. Ausdehnen nicht erlaubt, verkleinern erlaubt Basis automatisch.
Ich weiss nicht was Du insbesondere mit Deinen Anweisungen ausdehnen auf das 6fache bezweckst.
Habe ich zwei Elemente die ich nebeneinanderstellen will und jedes Element soll die Hälfte einnehmen, dann reicht flex: 1 0 50%. Falls ein Element eventuell doch von Natur aus größer als die 50% werden könnte - bei Tabellen ist mir so etwas schon passiert - oder man mit den Außenabständen nicht extra aufpassen will, dann gern auch flex: 1 1 50%.

Ich habe mal versucht Dein Beispiel anzupassen und im IE zu testen. Der nachfolgende Code sollte klappen

.item_1{
flex: 1 1 100%;
}

.item_2 {
flex: 1 1 50%;
}

.item_3 {
flex: 1 1 48.7%;
}

.item_4{
flex: 1 1 100%;
}

Wobei bei den Elementen mit der Basis 100%, die Werte für flex-shrink bzw. flex-grow völlig egal sind, soweit ich weiss.

Nachtrag: Nur Außenabstände spielen auch hier eine Rolle.


Ansonsten kann ich Peter Müllers Video-Training zu Flexboxen empfehlen