dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

flexbox devient à présent une feuille CSS à part

Browse source
This commit is contained in:
raphaelgoetter 2013-07-24 12:13:23 +02:00
parent e51b02ead5
commit 1d363286b2
2 changed files with 66 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
css/flexbox.css Normal file
View file

@ -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;
}

56
css/knacss.css
View file

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