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

➠ flexbox : affiche des blocs enfants dans une grille FLEXBOX responsive DEMO
syntaxe 1 : {up flexbox=x1-x2}contenu avec plusieurs blocs enfants{/up flexbox}
syntaxe 2 : {up flexbox=x1-x2}contenu bloc-1 {====} contenu bloc-2{/up flexbox}
x1-x2 sont les largeurs relatives des colonnes
exemple col=4-8 ou col=33-66 pour 2 colonnes span4 et span8
demo up.lomart.fr/css author Lomart version 1.0 - 08/2017
  • flexbox=6-6: nombre de colonnes
  • mobile: nombre de colonnes sur petit écran
  • tablet: nombre de colonnes sur moyen écran
  • class: class bloc principal
  • style: style inline bloc parent
  • class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
  • style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6

    Redimensionner votre navigateur pour voir l'effet responsive

    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 <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
    Consulter la classe UP-CSS FlexGrid pour connaitre les possibilités d'alignement horizontal et vertical.