Cuisine et Web

Le vent en poupe, flex est partout dans nos feuilles de styles et dans les frameworks CSS.

Cette propriété reste parfois mystérieuse et magique pour certains.

Une question revient souvent, comment je fais des lignes avec X colonnes et des marges entre chaque?

Voici un petit tutoriel pour débutant, en guise d'article, nécessitant un minimum de connaissances en Flexbox.

Et bien, ce n'est pas si compliqué à mettre en place et il n'y a pas besoin d'apprendre toutes les subtilités d'un framework qui soudainement semble bien rigide. pour cela quelques règles CSS se suffiront , si le framework ne dispose de class au CSS équivalent.

Un framework ne permettra pas de generer un motif different sur plusieurs lignes qui se repetera automatiquement. Un framework nécessite quasiment toujours que les élement reçoivent une class pour recevoir un style spécifique.

Quelles propriétés CSS faut-il utiliser pour faire des lignes de 2 colonnes et plus?

La propriété min-width va servir a déterminer le nombre d'élement à mettre par lignes , en prenant la plus petite valeur possible, cela laissera la place aux marges ou gap séparant les élèments les uns des autres.

La propriété flex-grow:1 va permettre d'étirer l'élement pour remplir la zone qui lui est disponible.

Par exemple, pour 3 colonnes, un min-width:26%; suffira à ce que seulement 3 élements puissent être sur une ligne.
flex-grow:1 permettra à ces 3 élements de 26% de largeur au minimum de s'étirer équitablement dans l'espace encore disponible, le navigateur se charge de faire le bon calcul à votre place.

body {
  display:flex;
  flex-wrap:wrap;
  gap: 0.5em 1em;
}
div {
  min-width:26%;
  flex-grow:1;
  border:solid;
}

Et si je veux alterner les lignes avec 3 puis 2 colonnes, Est-ce possible?

C'est encore relativement simple en conservant ce principe avec min-width, il reste à cibler recursivement tout les X elements et modifier le min-width appliqué.
Le selecteur :nth-child(Xn) est dédié à ce type d'opération.

Nous avons donc une récursivité tout les 5 élements: 2 + 3 toutes les deux lignes. Pour ces groupes de 5, nous en avons deux à faire grandir, avec un min-width:40% il n'y aura de la place que pour deux. (40 + 40 = 80, 100 - 80 reste 20). Les 20% théorique restant restent inférieurs a 26% , aucun autre element ne pourra se glisser sur cette ligne.

Les deux selecteurs à ajouter sont : div:nth-child(5n) et div:nth-child(5n - 1)(décallé de 1), ce qui nous donne:

body {
  display:flex;
  flex-wrap:wrap;
  gap: 0.5em 1em;
}
div {
  min-width:26%;
  flex-grow:1;
  border:solid;
}
div:nth-child(5n), 
div:nth-child(5n - 1) {
  min-width:40%
}

Et en colonnes ?

Le principe est le même mais il faudra penser a donner une hauteur au parent flex pour que flex-wrap soit effectif et force a construire les colonnes au fur à mesure qu'elles se remplissent.