diff --git a/doc/02b-layout-positionnement.md b/doc/02b-layout-positionnement.md
index b99330a..e32185b 100644
--- a/doc/02b-layout-positionnement.md
+++ b/doc/02b-layout-positionnement.md
@@ -115,7 +115,7 @@ HTML :
```html
premier
-
deuxième
+
deuxième
```
diff --git a/doc/03-grilles.md b/doc/03-grilles.md
index ec306e1..a9d92b6 100644
--- a/doc/03-grilles.md
+++ b/doc/03-grilles.md
@@ -93,13 +93,13 @@ Résultat :
Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
-Pour ce faire, appliquez la classe `.flexitem-double` à cet élément.
+Pour ce faire, appliquez la classe `.flex-item-double` à cet élément.
HTML :
```html
un div ou n'importe quoi d'autre
-
je suis deux fois plus large que mes frères
+
je suis deux fois plus large que mes frères
un 3è div ou n'importe quoi d'autre
etc.
@@ -112,14 +112,14 @@ Résultat :
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
-- `.flexitem-first` (l'élément apparaîtra avant tous les autres)
-- `.flexitem-last` (l'élément apparaîtra tout à la fin de la grille)
+- `.flex-item-first` (l'élément apparaîtra avant tous les autres)
+- `.flex-item-last` (l'élément apparaîtra tout à la fin de la grille)
HTML :
```html
un div ou n'importe quoi d'autre
-
je m'affiche avant tous mes frères
+
je m'affiche avant tous mes frères
un 3è div ou n'importe quoi d'autre
etc.
diff --git a/less/_02-layout.less b/less/_02-layout.less
index 5907a00..273ab5a 100644
--- a/less/_02-layout.less
+++ b/less/_02-layout.less
@@ -102,34 +102,35 @@ body > script {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/
-.flexbox,
-.flexbox-h,
-.flexbox-v {
+.flex-container {
display : flex;
flex-wrap: wrap;
+}
+
+.flex-container-h {
flex-direction: row;
}
-.flexbox-v {
+.flex-container-v {
flex-direction: column;
}
-.flexitem-fluid {
+.flex-item-fluid {
flex: 1;
}
-.flexitem-first {
+.flex-item-first {
order : -1;
}
-.flexitem-medium {
+.flex-item-medium {
order : 0;
}
-.flexitem-last {
+.flex-item-last {
order : 1;
}
-.flexitem-center {
+.flex-item-center {
margin: auto;
}
diff --git a/less/_03-grids.less b/less/_03-grids.less
index b78d5ff..cb6ebc6 100644
--- a/less/_03-grids.less
+++ b/less/_03-grids.less
@@ -38,14 +38,14 @@
& > * {
width: ~'calc(100% * 1 / @{number} - @{gutter})';
}
- & > .flexitem-double {
+ & > .flex-item-double {
width: ~'calc(100% * 2 / @{number} - @{gutter})';
}
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
& > * {
width: ~'calc(100% * 1 / 2 - @{gutter})';
}
- & > .flexitem-double {
+ & > .flex-item-double {
width: ~'calc(100% - @{gutter})';
}
}
@@ -53,7 +53,7 @@
& > * {
width: ~'calc(100% - @{gutter})';
}
- & > .flexitem-double {
+ & > .flex-item-double {
width: ~'calc(100% - @{gutter})';
}
}
diff --git a/less/_07-responsive.less b/less/_07-responsive.less
index 4647444..a9c0db3 100644
--- a/less/_07-responsive.less
+++ b/less/_07-responsive.less
@@ -269,7 +269,7 @@
border: 0;
}
- .flexbox {
+ .flex-container {
flex-direction: column;
}
diff --git a/sass/_02-layout.scss b/sass/_02-layout.scss
index 7183af8..0889bf1 100644
--- a/sass/_02-layout.scss
+++ b/sass/_02-layout.scss
@@ -102,34 +102,35 @@ body > script {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/
-.flexbox,
-.flexbox-h,
-.flexbox-v {
+.flex-container {
display : flex;
flex-wrap: wrap;
+}
+
+.flex-container-h {
flex-direction: row;
}
-.flexbox-v {
+.flex-container-v {
flex-direction: column;
}
-.flexitem-fluid {
+.flex-item-fluid {
flex: 1;
}
-.flexitem-first {
+.flex-item-first {
order : -1;
}
-.flexitem-medium {
+.flex-item-medium {
order : 0;
}
-.flexitem-last {
+.flex-item-last {
order : 1;
}
-.flexitem-center {
+.flex-item-center {
margin: auto;
}
diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
index b19a1f6..7ac73f2 100644
--- a/sass/_03-grids.scss
+++ b/sass/_03-grids.scss
@@ -38,14 +38,14 @@
& > * {
width: calc(100% * 1 / #{$number} - #{$gutter});
}
-& > .flexitem-double {
+& > .flex-item-double {
width: calc(100% * 2 / #{$number} - #{$gutter});
}
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
& > * {
width: calc(100% * 1 / 2 - #{$gutter});
}
- & > .flexitem-double {
+ & > .flex-item-double {
width: calc(100% - #{$gutter});
}
}
@@ -53,7 +53,7 @@
& > * {
width: calc(100% - #{$gutter});
}
- & > .flexitem-double {
+ & > .flex-item-double {
width: calc(100% - #{$gutter});
}
}
diff --git a/sass/_07-responsive.scss b/sass/_07-responsive.scss
index 207ce0f..0c401e5 100644
--- a/sass/_07-responsive.scss
+++ b/sass/_07-responsive.scss
@@ -268,7 +268,7 @@
border: 0;
}
- .flexbox {
+ .flex-container {
flex-direction: column;
}