diff --git a/css/flexbox.css b/css/flexbox.css new file mode 100644 index 0000000..4ee1cbc --- /dev/null +++ b/css/flexbox.css @@ -0,0 +1,65 @@ + + +/* ----------------------------- */ +/* ==flexbox classes */ +/* ----------------------------- */ + +/* flexbox layout context on container */ +.flex { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} +/* horizontal alignment */ +.flex-h { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +/* vertical alignment */ +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +/* for fluid items */ +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +/* for items that must appear first */ +.flex-start { + -webkit-box-ordinal-group: -1; + -moz-box-ordinal-group: 0; + -ms-flex-order: -1; + -webkit-order: -1; + -moz-order: -1; + order: -1; +} +/* for items that must appear middle */ +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + -moz-order: 1; + order: 1; +} +/* for items that must appear at the end */ +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order: 42; + -webkit-order: 42; + -moz-order: 42; + order: 42; +} diff --git a/css/knacss.css b/css/knacss.css index 7a593f7..28d65f2 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,5 +1,5 @@ /* -* www.KNACSS.com V2.6j @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.6k @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ @@ -261,60 +261,6 @@ body > script {display: none !important;} vertical-align: top; } -/* flexbox layout */ -.flex { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} -.flex-h { - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -.flex-v { - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; -} -.flex-start { - -webkit-box-ordinal-group: -1; - -moz-box-ordinal-group: 0; - -ms-flex-order: -1; - -webkit-order: -1; - -moz-order: -1; - order: -1; -} -.flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order: 1; - -webkit-order: 1; - -moz-order: 1; - order: 1; -} -.flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order: 42; - -webkit-order: 42; - -moz-order: 42; - order: 42; -} - /* alignments (blocks and inline) */ /* ------------------------------ */