flexbox renommage des classes
This commit is contained in:
raphaelgoettter
parent
0d9c9d9477
commit
7e73344592
8 changed files with 34 additions and 32 deletions
|
|
@ -115,7 +115,7 @@ HTML :
|
|||
```html
|
||||
<div class="flexbox">
|
||||
<div class="w400p">premier</div>
|
||||
<div class="flexitem-fluid">deuxième</div>
|
||||
<div class="flex-item-fluid">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="flexitem-double">je suis deux fois plus large que mes frères</div>
|
||||
<div class="flex-item-double">je suis deux fois plus large que mes frères</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
|
|
@ -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
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="flexitem-first">je m'affiche avant tous mes frères</div>
|
||||
<div class="flex-item-first">je m'affiche avant tous mes frères</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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})';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -268,7 +268,7 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue