Hi.
Ich hab mal eine CSS Datei gebastelt, um Flexbox als zentrale Layoutbasis für ein fluides Layout mit Sticky Footer zu nutzen.
Anstatt Dinge wie Floats, Inline-Box oder absolute/relative Positionierungen und negative Margins zu nutzen.
Hierbei soll eine größtmögliche Abwärtskompatibilität erreicht werden so dass auch die alte Flexbox Syntax eingebaut wurde.
Mit einbau der alten Flexbox Syntax kann man ja schon sehr viel abdecken: http://caniuse.com/#feat=flexbox
Browser, die noch nicht mal die alte Flexbox Syntax unterstützen, sollen hingegen unberücksichtigt bleiben, und mehr oder weniger "Plain Text" zeigen. Also sollen dafür keine Fallbacks mit Floats oder so realisiert werden.
Wirklich relevant wäre das ohnehin nur bei alten IE Versionen, bei denen dann sowieso noch viel mehr im Argen liegt und man für eine Kompatibilität viel Arbeit investieren müsste.
Hier mal das CSS. Über Verbesserungsvorschläge freue ich mich.
Gruß
/* flexbox.css v0.1.1*/
/* This CSS is for easy use of flexbox with support for older browsers*/
/* Mobile: IE Mobile 10+, Android 4, iOS 6, BB7, UC; Desktop: IE10+, Firefox ESR*/
.flexbox-col
{
/* Set Flexbox */
display: -webkit-box; /* OLD, iOS6, BB7, Andoid LTE4.3, UC */
display: -ms-flexbox; /* TWEENER - 2012 IE10 */
display: -webkit-flex; /* NEW, Older Webkit */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
/* Set Column Mode */
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
/* Main Axis (default: flex-start)*/
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* Cross Axis (default: stretch)*/
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
/* Cross Axis free space (default: stretch)*/
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.flexbox-row
{
/* Set Flexbox */
display: -webkit-box; /* OLD, iOS6, BB7, Andoid LTE4.3, UC */
display: -ms-flexbox; /* TWEENER - 2012 IE10 */
display: -webkit-flex; /* NEW, Older Webkit */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
/* Set Row Mode */
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
/* Main Axis (default: flex-start)*/
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* Cross Axis (default: stretch)*/
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
/* Cross Axis free space (default: stretch)*/
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.flexbox-child-fluid {
overflow: visible;
-webkit-box-flex: 1;
width: 1px; /* Bugfix for old Browser */
height: 1px; /* Bugfix for old Browser */
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 100px;
flex: 1 0 auto;
}
.flexbox-child-fixed
{
overflow: visible;
-webkit-box-flex: 0;
width: 1px; /* Bugfix for old Browser */
height: 1px; /* Bugfix for old Browser */
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 100px;
flex: 0 0 auto;
}