CSS - Flexbox

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.

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

cellule 000001
cellule 000002
cellule 000000000000000000000003
cellule 000004
cellule 000005
cellule 000006

<div class="fg-row fg-grow"> augmente la taille des cellules pour remplir la ligne

cellule 000001
cellule 000002
cellule 000000000000000000000003
cellule 000004
cellule 000005
cellule 000006

<div class="fg-row fg-center"> centre les cellules sur la ligne

cellule 000001
cellule 000002
cellule 000000000000000000000003
cellule 000004
cellule 000005
cellule 000006

<div class="fg-row fg-between"> répartit l'espace entre les cellules en remplissant la ligne

cellule 000001
cellule 000002
cellule 000000000000000000000003
cellule 000004
cellule 000005
cellule 000006

<div class="fg-row fg-around"> répartit équitablement l'espace

cellule 000001
cellule 000002
cellule 000000000000000000000003
cellule 000004
cellule 000005
cellule 000006

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)

cellule 000001
cellule 000002
cellule 000003
cellule 000004
cellule 000005
cellule 000006

<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.

cellule 000001
cellule 000002
cellule 000003
cellule 000004
cellule 000005
cellule 000006

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.

1:fg-c2 fg-cm5 fg-cs0
2:fg-c4 fg-cm7 fg-cs6
3:fg-c6 fg-cm12 fg-cs6
4:fg-c4 fg-cm4 fg-cs0
5:fg-c6 fg-cm8 fg-cs8
6:fg-c2 fg-cm12 fg-cs4

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

cellule 000001
cellule 000002
cellule 000003

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

cellule 000001
cellule 000002
cellule 000003
cellule 000004

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

0001 fg-vcenter
0002
<div class="fg-row fg-vcenter">
0003
0001 fg-vtop
0002
<div class="fg-row fg-vtop">
0003
0001 fg-vbottom
0002
<div class="fg-row fg-vbottom">
0003

Il est possible de spécifier la position pour chaque cellule

aucun alignement. Juste du texte pour avoir une cellule sur plusieurs lignes pour la démonstration
rien. hérite de row
vtop
vcenter
vbottom
vfill

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 h200 bd-rouge">
	<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.
h200
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

Centrage vertical avec plusieurs cellules

un contenu pour donner de la hauteur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec para/doca illi, nos admirabilia dicamus. Cur igitur, cum de re conveniat, non malumus usitate loqui? Hoc loco discipulos quaerere videtur, ut, qui asoti esse velint, philosophi ante fiant. Quia dolori non voluptas contraria est, sed doloris privatio. Quid, si reviviscant Platonis illi et deinceps qui eorum auditores fuerunt, et tecum ita loquantur?

contenu en haut à gauche
contenu au centre
contenu en bas à droite

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 ...

5:fg-c6 fg-cm8 fg-cs8
6:fg-c2 fg-cm12 fg-cs4

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