Einsatz von FLEXBOX / Präfix
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?
Code:
/* ###############
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/