Li qui prend toute la largeur

Bonjour,

comment faire pour que les box s'élargissent à droite et à gauche et se collent en restant centrés sauf pour la première qui ne s'élargit qu'à droite et la dernière qu'à gauche
c'est des li dans ul

j'ai mis justify-content: space-around; mais les box ne sont plus centrés quand je mets flex-grow

les box sont centrés comme sur la première capture d'écran mais plus grandes et se touchent


le code : https://jsfiddle.net/Alexx22/yma3ofd6/#&togetherjs=IGpOrwlzJ0
Modifié par Alex0123456 (24 Feb 2022 - 17:08)

Salut !

Alex0123456 a écrit :
comment faire pour que les box s'élargissent à droite et à gauche et se collent en restant centrés sauf pour la première qui ne s'élargit qu'à droite et la dernière qu'à gauche

Alors c'est hyper simple : j'ai rien compris

J'ai pas compris le coup de la premier et la dernière qui ne s'agrandissent que d'un coté... du coup elle sont plus petite des celles du milieu ? T'as pas une image du résultat souhaité ?

Met des marges de chaque coté du bloc englobant (?)

j'ai fait une liste ul li en justify-content: space-around et je voudrais que juste les box s'élargissent et se collent ce serait donc justify-content: space-around sans espace car sinon régler la taille des box à la main ce serait pas vraiment centré

justify-content: space-around;


je veux que les boites soient collé et de la meme taille

On ne comprend toujours pas , car https://jsfiddle.net/Alexx22/yma3ofd6/ fait exactement ce que tu veut sans les couleurs.
Cdt

ul {
    padding: 0 50px;
}

?

Bonjour,

Il me semble que le "justify-content" n'a pas besoin d'être en "space-around". La valeur "normal" suffit.

Il y a cependant quelques détails qui peuvent améliorer le rendu, en particulier suppression des margin et padding des ul et li, display: block et margin: auto pour les liens et un min-width pour les li (c'est peut-être un peu tout ça qui t'empêchait d'obtenir ce que tu voulais).

J'aurais fait comme ça : https://jsfiddle.net/parsimonhi/2b6gckdf/

Amicalement,