CSS - Flexbox

• Mode minimal, alignements et répartition
• Mode automatique
• Mode bootstrap
• Ordre colonnes
• Alignement vertical
• Alignement contenu

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

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

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

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

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

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.

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

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

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

{up addcsshead =
.demo2[border:1px solid green;padding:10px]
.demo2>*[border:1px dotted teal]
.demo2>*>*[border:1px dashed plum] }