GRID ou FLEX pour 2 ou 3 lignes selon contenu ?

(reprise du message précédent)

gcyrillus a écrit :
@boteha,

dans ce cas , flex et flex-wrap sont probablement plus proche, sans avoir a jouer avec des medias truc.
https://codepen.io/gc-nomade/pen/JjqvLpx teste avec resize aussi pour suivre un comportement générique quelque soit la largeur

.act {
  display:flex;
  flex-wrap:wrap;
  gap:1em;
}

Mais c'est bien sûr ! Ce n'était pas la peine d'aller chercher midi à quatorze heure comme j'ai fais plus haut !
En fait mon code forçait un nombre N d'éléments à s'aligner sur deux colonnes, mais ce n'était pas le sujet ici.
Modifié par Olivier C (24 Jun 2024 - 04:59)

Bonjour,

Effectivement, cela semble une bonne piste, codepen à jour.

Mais peut-on imposer à la deuxième ligne de n'avoir qu'un seul élément qui occupe toute la largeur ?

Si la place (E1 + E2 < 20em) :
E1 E2
E3

Si pas la place :
E1
E2
E3

Mais jamais
E1
E2 E3

Qu'en pensez-vous ?

Cela revient à dire que E3 occupe forcément toute la largeur.

boteha_2 a écrit :
Cela revient à dire que E3 occupe forcément toute la largeur.

Bonjour,

c'est ce que tu veut , parce-que ta boite ne sera jamais plus large ?

Si ta boite à une largeur fixe, les queries sont inutiles.

Pour forcer le passage en 3 ligne, avec flex, tu peut estimer une largeur minimale, par exemple entre 30 et 40%.

tu peut le faire par exemple via flex:1 1 min(36%, 100%) ou un min-width:36% dans une boite flex.

Pour toujours avoie e3 sur toute la largeur, ce serait

a {
  border:solid;
  padding:1em;
  flex:1 1 auto;
}
a:last-of-type{flex-basis:100%;}

https://codepen.io/gc-nomade/pen/YzbvKav exemples, avec aussi white-space normal pour voir.

Cdt
Modifié par gcyrillus (24 Jun 2024 - 14:24)

Bonjour,

Après avoir copié le code dans la vie réelle il y a un comportement que je ne comprends pas.

Disposition espérée avec les longueurs de texte dans les liens
L1 L2
L3

Affichage 100 %
L1
L2
L3

Si je zoome + cela passe correctement en :
L1 L2
L3

Testé sur Firefox et Chrome, ce n'est pas un caprice du navigateur.

Avez-vous une idée de la cause ?
Modifié par boteha_2 (28 Jun 2024 - 21:12)

Bonjour,

Ouille, je n'arrive pas à reproduire ce comportement sur le codepen.

Très bizarre, si j'enlève la bordure sur "a" le comportement redevient normal.

S'il y a une bordure c'est le comportement décrit ci-dessus.

Avez-vous une idée ?

Bonjour,
pareil pour moi , je n'arrive pas a reproduire ton défaut ni ne le comprend vraiment.

2 questions :
a) est ce que un box-sizing:border-box; résout ce drole de défaut?
b) est ce que box-shadow:0 0 0 1px green; a la place de border peut être envisagé ?

Cdt

Bonjour gcyrillus,

Merci de ton suivi.

box-sizing: border-box
Ne change rien.

Supprimer les bordures et remplacer par box-shadow:0 0 0 1px green
On obtient le comportement espéré.
Par contre je perds mes gouttières, normal ?

Autres solutions
Baisser le font-size
Mais pas possible, je suis à 0.95em et 0.9 c'est trop petit.

Baisser le padding-right
Pour le padding-left je suis contraint par une background-image.
Cette solution n'est donc pas très sympa car le bouton devient dissymétrique.

Comment le zoom + peut-il régler le problème avec les bordures, aucune idée...

boteha_2 a écrit :
Bonjour gcyrillus,
Supprimer les bordures et remplacer par box-shadow:0 0 0 1px green
On obtient le comportement espéré.
Par contre je perds mes gouttières, normal ?

?? non, il n'y a aucune raisons, sauf si il y une typo dans la feuille de style, Une autre sélecteur ailleurs qui interfère, éditer le mauvais fichier, avoir le sélecteur en double à force d'édition ...

Sans voir la page qui pose réellement le problème, difficile d'en dire plus.

cdt

Pour l'instant ma solution est de passer le padding-left et padding-right de 2em et 1.95em.

Je pense que personne ne verra rien, pas même moi.

Si je joue sur font-size :
0.946em = bon
0.947em = mauvais
Mais avec le padding à 1.95 je peut garder font-size à 0.95.

En display GRID je n'ai pas à me livrer à ces acrobaties.
Il semble donc que GRID et FLEX ne calculent pas les largeur exactement pareils et la correction de FLEX par zoom + sous Firefox ou Chrome est trop bizarre.

Cette longue parenthèse provisoirement fermée j'en viens à une question plus théorique.

L'intérêt de cette discussion est aussi de traiter un cas de choix entre FLEX et GRID, sujet évoqué par Raphaël dans ce tuto.

Dans ce cas nous avons vu que FLEX tient en 3 lignes alors que GRID avec container query est plus compliqué et ne fonctionne qu'à moitié.

Avec FLEX, l'effet tableau est obtenu car les liens occupent toute la largeur du parent.
Est-il possible d'avoir encore un effet tableau mais avec la largeur correspondant à celle du contenu le plus long.
En somme avec FLEX l'équivalent d'un GRID avec grid-template-columns: auto.

Si l'énoncé n'est pas clair je peux un peu développer le codepen.

Bonsoir,
Rapidement: flex et grid ne sont pas équivalent.

Grid construit une grille dans laquelle les enfants sont placés . Par défaut grid construit une grille de 1 colonne. Lignes et colonnes contribuent ensembles à une seule grille

Flex. La grille se construit au fur et à mesure du flux par les enfants. Par défaut, flex construit 1 première grille sur une ligne, ensuite chaque ligne(ou colonne si direction) sont chacune des grilles indépendantes de l'autre si flex-wrap le permet.

Sur une ou deux lignes, on peut les confondre, mais ces deux systèmes de grilles sont bien différents et donc avec des usages et comportement différents.
La première tentative de grille est le display:table et Cie Pour le coup celle-ci peu commune n'est jamais confondue ni avec flex ni avec grid.

A plus tard

edit: Je ne vois pas le bug que tu décrit et je n'ai pas souvenir d'en avoir rencontrer un similaire.
Mais ici, pour 3 éléments, c'est flex dont tu as besoin à mon humble avis, c'est tout à fait le genre de choses qu'il est supposé faire
Modifié par gcyrillus (29 Jun 2024 - 19:53)

Bonsoir gcyrillus,

Merci pour tes précisions.

Dans le cas qui m'intéresse, avec FLEX y a-t-il un moyen d'avoir l'effet tableau en se basant sur la largeur de l'élément le plus large, et non sur la largeur du parent ?

C'est là où je sèche.

Je subodore que ce n'est pas possible.

boteha_2 a écrit :
Bonsoir gcyrillus,

Merci pour tes précisions.

Dans le cas qui m'intéresse, avec FLEX y a-t-il un moyen d'avoir l'effet tableau en se basant sur la largeur de l'élément le plus large, et non sur la largeur du parent ?

C'est là où je sèche.

Je subodore que ce n'est pas possible.

heu oui, https://codepen.io/gc-nomade/pen/ExzBYxj la je force le troisième à avoir un min-width:15em; et je met panier en width:min-content; , le min-width n'est pas necessaire mais il y a des chances que tu ai alors toujours 3 lignes si tu ne détermine pas une largeur minimale à l'avance.
Modifié par gcyrillus (29 Jun 2024 - 20:01)

panier est forcément à largeur fixe.

Par contre je peux créer pour act un parent en width:min-content.

Bon j'essaye demain...

Encore merci de ton aide.

Bonjour,

gcyrillus a écrit :

heu oui, https://codepen.io/gc-nomade/pen/ExzBYxj la je force le troisième à avoir un min-width:15em; et je met panier en width:min-content; , le min-width n'est pas necessaire mais il y a des chances que tu ai alors toujours 3 lignes si tu ne détermine pas une largeur minimale à l'avance.

J'ai intégré au codepen et cela fonctionne.

Effectivement, il faut préciser un min-width, autrement il y a toujours 3 lignes.
Et ajouter un parent.

J'aurais préféré une solution 100% fluide (sans min-width) mais cela semble impossible.

boteha_2 a écrit :
Bonjour,
....
J'aurais préféré une solution 100% fluide (sans min-width) mais cela semble impossible.

Bonjour,
C'est possible si le 3eme a suffisamment de texte pour être plus large que la somme des deux premiers + le gap, c'est juste peu probable ici d'où un min-width bien utile et ça aère un peu aussi je crois.

gcyrillus a écrit :

Bonjour,
C'est possible si le 3eme a suffisamment de texte pour être plus large que la somme des deux premiers + le gap, c'est juste peu probable ici d'où un min-width bien utile et ça aère un peu aussi je crois.

Je comprends.