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

Cliquer pour lire la documentation

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 : flexbox=4-8 ou flexbox=33-66 pour 2 colonnes (équivalent: span4 et span8)
Note : les options class-1 à class-6 et style-1 à style-6 sont à saisir directement dans le shortcode
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @tags: Layout-static
  • flexbox: nombre de colonnes ou prefset sous la forme x-x-x-x
  • tablet: nombre de colonnes sur moyen écran sous la forme x-x-x-x
  • mobile: nombre de colonnes sur petit écran sous la forme x-x-x-x

Style bloc principal

  • id: identifiant du bloc principal
  • class: class ou style pour le bloc principal
  • style: class ou style pour le bloc principal

Style des blocs secondaires

  • bloc-tag = 1: ajoute un bloc DIV autour des contenus enyre {===}
  • 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
  • bloc-style: style inline UNIQUEMENT ajoutés au bloc enfant

Style ajouté dans le head de la page

  • css-head (base-css): style ajouté dans le HEAD de la page

Version 5.1
  • reprise complète du script pour uniformisation des méthodes avec flexauto
  •  ajout option bloc-tag
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 <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

Mise en forme version 5.1

Les actions flexauto et flexbox sont sans doute celles que j'utilise le plus.

Elles permettent une présentation plus souple et plus agréable que les tableaux avec le grand avantage d'être responsive.

J'ai revu complétement ces 2 actions pour la version 5.1 de UP, en uniformisant leurs options concernant la mise en forme

Quoi de mieux que d'utiliser ces nouvelles fonctionnalités pour vous les montrer et démontrer.

Les options concernées sont listées dans le tableau ci-dessous.
Pour rappel, une option se terminant par -, permet de donner une règle qui concerne tous les éléments. Si on remplace l'étoile par un nombre de 1 à 12, on cible un groupe d'éléments. Dans notre cas, il s'agit des colonnes. Il aurait été préférable que je les nomme col-class-* et col-style-*. Mais il est trop tard, la compatibilité ascendante l'interdit 

L'exemple utilise flexbox, mais flexauto fonctionnne exactement de la même façon.

class
style

classe(s) ou style(s) ajouté en inline dans la balise DIV du bloc principal 

bloc-style    

style UNIQUEMENT ajoutés à tous les blocs enfants par une règle CSS dans le head. #id>*[style]

style-*

style-* est identique à bloc-style
style-X ajoute une règle CSS dans le head. #id .col-X[style]  
Nouvelle option 5.1 pour flexauto

class-*    

class-* est ajouté à la balise de tous les blocs
class-X ajoute la règle dans la balise de tous les blocs enfants
Nouvelle option 5.1 pour flexauto

bloc-tag

par défaut, un bloc DIV encadre les contenus séparés par {===}
bloc-tag=0 n'ajoute pas de bloc, les attributs sont ajoutés à la balise enfant
Nouvelle option 5.1 pour flexauto et flexbox

Les explications

{up flexbox=2-10 | mobile=12
| class=fg-gap m-child-raz-1 bd-gris
| style=font-size:1rem
| bloc-style=border:1px grey solid; padding:10px
| class-*=ombreMax
| class-1=bg-rouge t-blanc
| class-2=bd-rouge
| css-head=#id .col-1.row-odd[background:var(--bleuClair) !important]
#id .col-2.row-odd[border:2px solid var(--bleuClair) !important]
}

flexbox : pas de changement, c'est la largeur des 2 colonnes. 12 pour toute la largeur sur mobile.
class : les classes s'appliquent au bloc parent qui entoure tous les blocs enfants avec une bordure grise (bd-gris).  le classes fg-gap et m-child-raz-1 agissent sur les marges. Voir la feuille de style de UP.
style : pour la démo, je précise la taille des caractères
bloc-style : par défaut, tous les blocs enfants ont une bordure rouge et un padding
class-*: j'ajoute une ombre à tous les blocs enfants (toutes les colonnes)
class-1 : la première colonne aura un texte blanc sur fond rouge
class-2 : la deuxième colonne est entourée de rouge
css-head : cette option universelle va nous permettre de styler en toute liberté !

Un peu de technique pour comprendre les règles de l'option css-head

Il aurait été possible de faire plus simple, amis on perdait le charme de la démo !

Tous les blocs enfants ont 3 classes pour permettre de les styler :

  • col-X : le numéro de sa colonne de 1 à N
  • row-X: le numéro de sa ligne de 1 à N
  • row-even ou row-odd selon que la ligne est paire ou impair

Ces classes nous permettent de cibler :

  • une colonne par #id .col-X
  • une ligne par #id .row-X
  • un bloc par ses coordonnées #id .row-X.col-X Notez bien l'absence d'espace entre les 2 classes pour indiquer qu'elles sont dans la même balise. L'espace avec #id indique qu'elles sont ses enfants. C'est beau le CSS !
  • un bloc d'une colonne sur une ligne paire ou impaire. C'est le cas dans notre exemple avec #id .col-1.row-odd pour les bloc de la colonne 1 qui sont sur une ligne paire.

Attention à la priorité des sélecteurs CSS

Par définition, pour simplifier, une règle CSS dans une balise HTML a un poids (ou priorité) plus important qu'une règle dans un fichier CSS ou dans le head de la page. 

C'est pour cela que l'on ajoute l'attribut !important afin de le rendre prioritaire

En résumé, toutes les options sont dans le head de la page pour toutes les options (bloc-style, style- et css-head). class-* est obligatoirement dans la balise des blocs enfants.
Je ne parle pas des options class et style qui ne rentre pas en conflit avec leurs enfants

    Si la facilité d'utilisation des classes n'était pas si grande, l'idéal serait de ne pas utiliser l'option class-* pour éviter les bagarres entre enfants.

    L'option bloc-tag

    Cette option fait son apparition dans la version 5.1 de UP.

    Sa fonction est utile lorsque le contenu des blocs enfants provient d'autres actions UP situées entre des shortcodes séparateurs pour plus de lisibilité.

    Les shortcodes séparateur encadrent leur contenu par une balise DIV qui peut gêner l'application de certaines règles CSS flexbox ou grid.

    Je ne vais pas rentrer plus dans les explications, si vous êtes confronté à un souci CSS, pensez à ajouter une option bloc-tag=0 pour ne pas ajouter ce bloc superflu !
    Une autre solution est de ne pas utiliser de shortcodes séparateurs, mais je trouve cela moins clair. A vous de choisir.
    Dans les 2 cas, les classes class-* seront ajoutées à la balise des enfants directs.

    {up flexbox=2-10
    | class=fg-gap m-child-raz-1 bd-gris
    | style=font-size:1rem
    | bloc-style=border:1px grey solid; padding:10px
    | class-*=ombreMax
    | class-1=bg-rouge t-blanc
    | class-2=bd-rouge
    | css-head=#id .col-1.row-odd[background:var(--bleuClair) !important]
               #id .col-2.row-odd[border:2px solid var(--bleuClair) !important]
    }
    Consulter la classe UP-CSS FlexGrid pour connaitre les possibilités d'alignement horizontal et vertical.
    Pour info, cette page utilise 9 action(s) :
    upactionslist (1) readmore (1) csv2def (1) div (1) flexbox (2) span (1) jcontent-in_content (1) jcontent-info (1)