Projekt anfragen

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.

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 */
	

Mehr Wissen aus der Praxis

Barrierefreiheit beginnt im Kern: Warum Joomla das ideale CMS für zugängliche Websites ist

Zur Case Study

„Website in 10 Minuten“ – Genial oder gefährlich? Was Website-Baukästen wirklich leisten (und wann du besser mit Profis arbeitest)

Zur Case Study