flexBox ~ blocs enfants dans une grille flexbox

L'action flexbox permet des créer des colonnes côte à côte sur une grand écran et empilées sur un mobile.

Cela permet, par exemple, d'insérer facilement une image à coté d'un texte ou une synthèse avec son développé à côté.

Syntaxe wysiwyg

Pour suivre le grand principe de UP de ne pas avoir à passer en mode code, le contenu des colonnes est séparé par le shortcode {===}, avec au minimum 3 signes égal.

1

2

3

4

5

6

Explications:

{up flexbox=3-9 | tablet=6 | mobile=12-0 
   | class=fg-gap bg-jauneClair 
   | class-1=bd-rouge 
   | class-2=bd-vert 
   | style-*=text-align:center
}
1

<img src="/images/admin/joomla-logo-32.png" alt=""/>
{=====}
2
{==========}
3
{=====}
4
{==========}
5
{=====}
6
{/up flexbox}

L'intégralité du code pour voir la méthode de saisie. Le contenu de chaque cellule est séparé par au minimum 3 signes égal entre accolades.

Les paramètres du shortcode définissent

flexbox=3-9

Le paramétre principal contient la largeur des colonnes sur grand écran, soit 3/12 et 9/12.
On considère donc qu'il s'agit d'un tableau sur 2 colonnes.

tablet=6-6

sur moyen écran, on aura 2 colonnes égales.
Si l'on indique pas de valeurs, elles seront identiques à celles pour le grand écran.

mobile=12-0

sur mobile, une seule colonne de la largeur de l'écran. La 2ème est masquée (0)
Si l'on indique pas de valeurs, les cellules occuperont toutes la largeur.

class

fg-gap ajoute une marge entre les cellules et bg-jauneClair un fond jaune paille. Les classes indiquées sont ajoutées à la balise conteneur (fg-row)

class-1 & class-2

bd-rouge & bd-vert ajoute une bordure colorée respectivement à la colonne 1 et la colonne 2

style-*

le style inline text-align:center est ajouté à toutes les cellules

Syntaxe sans séparateur

L'exemple précedent avec ce code

{up flexbox=3-9 | tablet=6-6 | mobile=12-0 | class=fg-gap bg-jauneClair | class-1=bd-rouge | class-2=bd-vert | style-*=text-align:center}
<div> 1 <br><img src="/images/admin/joomla-logo-32.png" alt=""/> </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
{/up flexbox}

1

2

3

4

5

6