flexBox ~ blocs enfants dans une grille flexbox

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.

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 .up-col-1.up-row-odd[background:var(--bleuClair) !important]
#id .up-col-2.up-row-odd[border:2px solid var(--bleuClair) !important]
}

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 :

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

Ces classes nous permettent de cibler :

• une colonne par #id .up-col-X
• une ligne par #id .up-row-X
• un bloc par ses coordonnées #id .up-row-X.up-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 .up-col-1.row-odd pour les blocs 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]
}