Flexbox-Attribute für den IE10

Das Flexible Box Layout Module, besser bekannt als Flexbox, vereinfacht die Umsetzung teils komplexer Layouts mittels CSS enorm. Glücklicherweise unterstützen inzwischen alle moderneren Browser das Flexbox-Modul. Anders sieht es jedoch bei den älteren Internet Explorer-Versionen aus, besonders dem IE10, der die Technik eigentlich unterstützen sollte.

Es müssen jedoch ein paar Kleinigkeiten im CSS (oder einem Precompiler deiner Wahl) hinzugefügt werden, damit auch der IE10 flexbox-basierende Layouts korrekt anzeigt werden. Da wir euch dies in Zukunft vereinfachen wollen, haben wir für euch eine kurze Übersicht über die entsprechende CSS-Properties und den entsprechenden Values zusammengestellt, denn neben den CSS-Properties selbst unterscheiden sich teilweise auch die Values.

Einen Schnelleinstieg in Flexbox findet ihr übrigens hier.

display

	display: -ms-flexbox | -ms-inline-flexbox  /* IE 10 */
	display: flex | inline-flex  /* Standard */

flex-direction

	-ms-flex-direction: column | column-reverse | row | row-reverse  /* IE 10 */
	flex-direction: column | column-reverse | row | row-reverse  /* Standard */

flex-wrap

	-ms-flex-wrap: none | wrap | wrap-reverse  /* IE 10 */
	flex-wrap: nowrap | wrap | wrap-reverse  /* Standard */

flex-flow

	-ms-flex-flow: <-ms-flex-direction> || <-ms-flex-wrap>  /* IE 10 */
	flex-flow:  ||   /* Standard */

justify-content

	-ms-flex-pack: center | end | justify | start  /* IE 10 */
	justify-content: center | flex-end | flex-start | space-around | space-between  /* Standard */

order

	-ms-flex-order:   /* IE 10 */
	order:   /* Standard */

align-items

	
	-ms-flex-align: baseline | center | end | start | stretch  /* IE 10 */
	align-items: baseline | center | flex-end | flex-start | stretch  /* Standard */

align-self

	-ms-flex-item-align: auto | baseline | center | end | start | stretch  /* IE 10 */
	align-self: auto | baseline | center | flex-end | flex-start | stretch  /* Standard */

align-content

	-ms-flex-line-pack: center | distribute | end | justify | start | stretch  /* IE 10 */
	align-content: center | flex-end | flex-start | space-around | space-between | stretch  /* Standard */