[Résolu] Menu responsif avec flex (ou autre) ?

Bonsoir,

Je souhaite créer un menu horizontal classique dont les rubriques puissent se répartir horizontalement suivant la taille des écrans, l'espace entre chaque rubrique serait donc variable.

J'ai regardé les tuto flex mais je n'ai pas réussi à exploiter cette solution.

J'ai donc un menu basique :

<ul>
 	<li>Rubrique 1</li>
 	<li>Rubrique 2</li>
 	<li>Rubrique 3</li>
 	<li>Rubrique 4</li>
</ul>

et actuellement, mon code est :

.menu {
	text-align-last: center;
	display: block;
	padding-left: 45px;
	padding-right: 45px;
	padding-top: 50px;
	margin-bottom: 80px;
.menu ul li {
	display: inline-block;
	width: 220px;
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center!important;
	color: #FFFFFF!;
	background-color: rgba(0,177,230,0.8);
}

Je ne sais pas si ça vous inspire

Salut,

Il faut juste mettre un display:flex; sur le ul, un flex:1 1; sur les li et c'est bon...
https://jsfiddle.net/undless/p1u376Ln/

Et pour avoir de l'espace autour c'est justify-content: space-around;
https://jsfiddle.net/undless/p1u376Ln/10/

Tout est marqué ici https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html ou ici https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Il n'y a pas une trace de flex dans ton code, tu n'as rien essayé ?

Coucou Goudurisc !
Tiens moi au courant !

.menu ul li:not(:first-child) {
 margin: 0 0 0 4vw;
}

Merci beaucoup _laurent, ça fonctionne magnifiquement, j'avais évoqué cette possibilité flex dans mon avant dernier post mais dans un contexte différent et ça ne fonctionnait pas. Du coup, je suis super content de pouvoir l'appliquer ici (et certainement ailleurs), c'est franchement top !!!

Merci Jean-Pierre, ton tuto est plus "complexe" (pour moi) mais plus complet, du coup, je le conserve en magasin pour un cas de figure plus pointu !

Merci vzytoi mais ça ne fonctionnait pas (pou moi) et j'obtenais un résultat moins bon qu'avec un word-spacing (soit un décalage au centre quand mes items passaient sur 2 lignes), mais je retiens quand même cette option qui me semble applicable à d'autres situations.

Donc, un grand merci à tous, sans oublier Alsacreations qui reste, après tant d'années d'existence, encore en tête des forums dev pour la qualité des interventions