Une grille FLEXBOX créée pour UP. Elle est responsive, légère et adaptée à ses besoins.
Elle supporte l'ajout de padding, border, background-color sur les cellules enfants
sans avoir besoin de créer un bloc interne pour l'habillage.
- Mode minimal, alignements et répartition
- Mode automatique
- Mode bootstrap
- Ordre colonnes
- Alignement vertical
- Alignement contenu
Pour ne pas surcharger le code pour la démonstration, les cellules sont stylées par:
.fg-row > *:nth-child(odd) {background-color:violet}
.fg-row > *:nth-child(even) {background-color:tan}
.fg-row > * {padding:5px;border:#666 dotted 2px;text-align:center}
Mode minimal, alignements et répartition
<div class="fg-row">
va afficher les blocs enfants en leur laissant gérer l'espace dont ils ont besoin
<div class="fg-row fg-grow">
augmente la taille des cellules pour remplir la ligne
<div class="fg-row fg-center">
centre les cellules sur la ligne
<div class="fg-row fg-between">
répartit l'espace entre les cellules en remplissant la ligne
<div class="fg-row fg-around">
répartit équitablement l'espace
Grille automatique
Avec cette méthode, il suffit de mettre des blocs dans un bloc parent pour les organiser en grille. Aucun code n'est ajouté aux enfants, c'est le bloc parent qui donne les instructions.
<div class="fg-row fg-auto-4 fg-auto-m3 fg-auto-s2">
définit le nombre de colonnes en vue grand écran, tablette (m) ou smartphone (s)
<div class="fg-row fg-gap fg-auto-4 fg-auto-m3 fg-auto-s2">
la même chose en ajoutant des parges entre les cellules. La dernière cellule occupe le double d'espace grace à une classe "fg-c6" dont nous allons parler dans l'exemple suivant.
Grille manuelle (méthode bootstrap)
L'approche est celle de bootstrap et ses 12 colonnes (span1 à span12) avec la particularité d'avoir une colonne à zéro pour la masquer. Cela sera pratique lors de l'utilisation avec les shortcodes de UP.
Le résultat ci-dessus est obtenu à l'aide de ce code.
<div class="fg-row fg-gap">
<div class="fg-c2 fg-cm4 fg-cs0">cellule 000001</div>
<div class="fg-c4 fg-cm8 fg-cs6">cellule 000002</div>
<div class="fg-c6 fg-cm12 fg-cs6">cellule 000003</div>
</div>
Le principe pour le responsive
- sur tablette, sauf indication spécifique (m), on utilise les règles pour grand écran
- sur smartphone, la largeur est de 100% sauf indication spécifique (s)
Ordre des colonnes
Il est possible de définir l'ordre des colonnes pour les 3 modes responsives avec ce type de code:
<div class="fg-row fg-gap">
<div class="fg-c2 fg-cm4 fg-ord-m3">cellule 000001</div>
<div class="fg-c4 fg-cm8 fg-ord-m2">cellule 000002</div>
<div class="fg-c6 fg-cm12 fg-ord-m1">cellule 000003</div>
</div>
Si l'on veut juste inverser l'ordre des colonnes par ligne, il est possible de l'indiquer dans le bloc parent par fg-reverse
Alignement vertical
Par défaut, toutes les cellules d'une même ligne ont la même hauteur (fg-vfill).
Il est possible de changer ce comportement en ajoutant une des classes: fg-vtop, fg-vcenter, fg-vbottom
<div class="fg-row fg-vcenter">
<div class="fg-row fg-vtop">
<div class="fg-row fg-vbottom">
Il est possible de spécifier la position pour chaque cellule
Actuellement, il n'est pas prévu de classe pour cela. Il faut utiliser des styles inline.
<div class="fg-row fg-vcenter ">
<div class="fg-c2">aucun alignement. Juste du texte pour avoir une cellule sur plusieurs lignes pour la démonstration</div>
<div class="fg-c2">rien. hérite de row</div>
<div class="fg-c2" style="align-self:flex-start">vtop</div>
<div class="fg-c2" style="align-self:center">vcenter</div>
<div class="fg-c2" style="align-self:flex-end">vbottom</div>
<div class="fg-c2" style="align-self:stretch">vfill</div>
</div>
Alignement du contenu
Flexbox aligne uniquement les cellules et pas leur contenu. Cette section montre des solutions pour y arriver avec les classes up-flex
Centrage vertical et horizontal d'une seule cellule
Un texte d'accompagnement
Explication
<div class="fg-row fg-vcenter fg-center minh200 bd-rouge m-child-raz-1">
<div>
<p>Un texte d'accompagnement</p>
<button>BOUTON</button>
</div>
</div>
- fg-row
- Le bloc parent est un conteneur flex
- fg-vcenter fg-center
- on aligne verticalement et horizontalement les blocs enfants
note: ici, nous avons 2 éléments (p & button), il est donc nécessaire de les mettre dans un bloc qui servira pour le centrage. - minh200
- avec une seule cellule, il faut définir une hauteur sur le bloc parent. ici, une hauteur minimale de 200px
- bd-rouge
- une bordure rouge pour les besoins de la démo
- m-child-raz-1
- supprime les marges externes du premier et du dernier bloc enfant, soit le p et le button
Centrage vertical avec plusieurs cellules
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Sed ego in hoc resisto; Videamus animi partes, quarum est conspectus illustrior; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Aliis esse maiora, illud dubium, ad id, quod summum bonum dicitis, ecquaenam possit fieri accessio. Duo Reges: constructio interrete. Sed tamen intellego quid velit. Hoc non est positum in nostra actione.
Explications
<div class="fg-row">
<div class="fg-c3">
un contenu pour donner de la hauteur<br>{up lorem=1}
</div>
<div class="fg-c3 fg-row fg-vtop fg-start">
<div>contenu en haut à gauche</div>
</div>
<div class="fg-c3 fg-row fg-vcenter fg-center">
<div>contenu au centre</div>
</div>
<div class="fg-c3 fg-row fg-vbottom fg-end">
<div>contenu en bas à droite</div>
</div>
</div>
- ligne 1
- le conteneur flexbox qui va contenir les 4 cellules de même largeur (fg-c3)
- ligne 2 à 4
- du contenu pour simuler une hauteur
- ligne 5
- fg-c3 largeur de la cellule dans le bloc en ligne 1.fg-row fait également de ce bloc un parent flex. fg-vtop fg-start pour centrer la cellule interne
- ligne 8
- idem ligne 5 avec fg-vcenter fg-center pour le centrage
- ligne 11
- idem ligne 5 avec fg-vbottom fg-end pour aligner en bas à droite
Centrage automatique du contenu des blocs enfants
4:fg-c4 fg-cm4 fg-cs0
une deuxième ligne ...
Explications
<div class="fg-row fg-gap fg-child-vcenter fg-child-center">
<div class="fg-c4 fg-cm4 fg-cs0"><div><p>4:fg-c4 fg-cm4 fg-cs0</p><p>une deuxième ligne ...</p></div></div>
<div class="fg-c6 fg-cm8 fg-cs8">5:fg-c6 fg-cm8 fg-cs8</div>
<div class="fg-c2 fg-cm12 fg-cs4">6:fg-c2 fg-cm12 fg-cs4</div>
</div>
Tout se passe dans le conteneur parent. Ce qui est le but recherché: ne pas avoir à définir individuellement l'alignement des cellules.
Les largeurs des cellules n'ont d'autres utilités que de tester le comportement responsives.
- fg-row fg-gap
- pour indiquer qu'il s'agit d'un conteneur flex avec une marge (gap) entre les cellules
- fg-child-vcenter
- le contenu des cellules enfants sera centré verticalement
- fg-child-center
- le contenu des cellules enfants sera centré horizontalement
Note: il est ensuite possible de jouer sur l'alignement de chacune des cellules avec la méthode précedente: fg-row fg-vxx
Répartition verticale
Dès que l'on met du contenu dans une boîte, le problème de l'alignement verticale et des marges superflues se pose. Le contenu ne se répartit pas dans la hauteur du bloc parent.
Le résultat sans intervention
Titre H3 avec marge au-dessus
La première ligne de contenu
et la suivante
Le pied de bloc
Le code
<div class="demo2" style="height:250px">
<h3 class="notoc">Titre H3 avec marge au-dessus</h3>
<p>La première ligne de contenu</p>
<p>et la suivante</p>
<p>Le pied de bloc</p>
</div>
Le CSS de base du titre H3 a une marge haute de 40px. Les autres blocs se placent à la suite.
Le résultat avec les classes UP
Titre H3 avec marge au-dessus
La première ligne de contenu
et la suivante
Le pied de bloc
Le code
<div style="height:300px" class="demo2 fg-vspace-between m-child-raz">
<h3 class="notoc">Titre H3 avec marge au-dessus</h3>
<p>La première ligne de contenu</p>
<p>et la suivante</p>
<p>Le pied de bloc</p>
</div>
La classe m-child-raz supprime la marge haute du premier bloc et la marge basse du dernier.
La classe fg-vspace-between répartit les blocs enfants sur la hauteur du bloc parent. fg-vspace-between-1 répartit les blocs petit-enfants et fg-vspace-between-2 les blocs arrière-petit-enfants
Pour modifier le mode de répartition, utilisez une des classes ci-dessous.
Petite variante pour cet exemple, le contenu est dans une DIV, qui devient l'enfant direct. C'est donc ce bloc qui est pris en compte pour la répartition verticale.
<h3 class="notoc">Titre H3</h3>
<div>
<p>1ère ligne de contenu</p>
<p>et la suivante</p>
</div>
<p>Le pied de bloc</p>
fg-vspace-between
Titre H3
1ère ligne de contenu
et la suivante
Le pied de bloc
fg-vspace-around
Titre H3
1ère ligne de contenu
et la suivante
Le pied de bloc
fg-vspace-evenly
Titre H3
1ère ligne de contenu
et la suivante
Le pied de bloc
fg-vspace-center
Titre H3
1ère ligne de contenu
et la suivante
Le pied de bloc
fg-vspace-start
Titre H3
1ère ligne de contenu
et la suivante
Le pied de bloc
fg-vspace-end
Titre H3
1ère ligne de contenu
et la suivante
Le pied de bloc
{up addcsshead =
.demo2[border:1px solid green;padding:10px]
.demo2>*[border:1px dotted teal]
.demo2>*>*[border:1px dashed plum] }