Bonsoir

J'ai une liste de boutons qui sont en fait des <li> dans une <ul> disposés dans un truc comme ça :

<ul class="buttonWrapper">
	<li></li>
	<li></li>
	<li></li>

	[...]


	<li></li>
	<li></li>
	<li></li>
</ul>

auxquels j'ai donné un style à l'arrache pour tester qui est celui-ci :

.buttonWrapper {
	margin: 0; padding: 0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	min-height: 2.5rem;
}

.buttonWrapper li {
	margin: 0; padding: 0;

	height: 2.5rem;
	background-color: red;
	border:1px solid black;
	box-sizing: border-box;
}

Le problème étant que le nombre de boutons peut être élevé, il est nécessaire de pouvoir passer à deux lignes. Mais c'est quand même très moche dans certains cas de se retrouver avec 9 boutons de taille raisonnable sur une ligne et un seul bouton qui prend la largeur de tout l'écran sur la ligne en dessous.

Etant donné que le nombre de boutons varie, est-il possible d'obtenir un résultat satisfaisant pour les boutons sur la deuxième ligne?

Bonjour Chaussette56220,

Si j'applique ton code , j'ai pas ce phénomène sur la deuxieme ligne ?

https://codepen.io/Zonecss/pen/WVegOj

Salut

Oui désolé, c'est parce que j'ai oublié de mettre "flex-grow: 1" sur les li dans le code que j'ai donné (donc ils se sont pas étirés).

Mais le problème est le même puisqu'il y a moins de li sur la ligne du bas que sur la ligne du haut, donc si on les étire ils seront disproportionnés.

En fait, ce que je voudrais c'est qu'il y ait un nombre équivalent de li en haut et en bas.