Flexbox alignement texte horizontal

Bonjour,
Je fais des essais sur flexbox que je découvre.
Dans une autre discussion (Flexbox couleur de fond), vous avez résolu le problème du centrage vertical du texte d'un menu (titres sur une ligne et titres sur deux lignes) pour avoir aussi une couleur de fond de même hauteur sur les éléments de la box.
Or, plutôt que que :

.navbarre > ul {
display: flex;
justify-content:space-between;………

j'aimerais que les titres du menu occupent toute la largeur de la box et je n'arrive pas à centrer le texte horizontalement sur chaque enfant.

.navbarre > ul { 
	display: flex;
 /*   justify-content:space-between;*/
	flex-direction: row;
	font-weight: bold; /*en 14px; */	
	width: 100%;
} 
.navbarre > ul > li { /* concerne les grands titres non cachés */
	display: flex;
	align-items: center;/*aligne les grands titres verticalement*/
	flex-grow: 1;
	position:relative; /* permet de bien positionner le menus en dessous */
	text-align: center;/* permet de centrer le texte des grands titres, mais pas dans la box extensible*/
	padding: 0.3em 0.5em 0.5em 0.5em ;
}

Merci d'avance

Hello,

Pour aligner dans l'axe principal (horizontalement dans ton cas), la propriété à utiliser est "justify-content".

Tu devrais donc ajouter :

.navbarre > ul > li {
  justify-content: center;
}

Par ailleurs, si tu veux que tous les <li> aient la même largeur, ce n'est pas "flex-grow: 1;" que tu dois écrire mais "flex: 1;", ou en version complète "flex-grow: 1; flex-basis: 0;".

Bon dimanche

Merci encore Raphael pour m'apporter des solutions les unes après les autres.
I apologize, mais j'abuse et je continue sur un autre problème sur lequel je bute : le problème de positions des submenus les uns par rapport aux autres.
J'ouvre donc le premier submenu (submenu1) quand je passe la souris sur un grand titre qui se colore alors en jaune (cf. image). Ce submenu1 se place correctement en dessous grâce à position: absolute. Je rappelle que .navbarre est en position: relative;

.navbarre  li:hover > .submenu1 { 
display:flex;
flex-direction: column;
position: absolute; /* permet de bien positionner le submenu1 en dessous */
top:100%; /* permet de jouer sur la hauteur de l'ensemble du submenu1 par rapport aux grands titres */
left: 0%; /* permet de  jouer sur le déplacement de l'ensemble du submenu1 par rapport aux grands titres */
min-width:100%;	/* permet de mettre au moins la largeur du submenu par rapport aux grands titres. Voir si ne pas mettre une largeur fixe  */
Z-index:999; /* permet de placer l'ensemble des submenu1 au-dessus du texte de l'article*/
text-align: left; /* permet de centrer les titres autres que les grands*/	
}

Puis de même pour les submenu2 qui doivent se positionner à droite et en face du li qui est survolé. Or, que dois-je utiliser comme position ? En position absolute, si left:100% marche bien, le top le place en haut, ce qui me semble normal car position absolute, mais float: left ne semble pas fonctionner.

.submenu1  li:hover > .submenu2 { 
display:flex;
flex-direction: column;
position: absolute;
top:0%; /*il ne se met pas à 0% du li du submenu1, mais à  0% de l'ensemble*/
left: 100%; /* permet de jouer sur le déplacement de l'ensemble du submenu2 par rapport aux submenus1 */
padding: 0em;
Z-index:999;
text-align: left; /* permet de centrer les titres autres que les grands*/
} 

Dans l'image, j'aimerais que le submenu2, i.e. Armes, soit placé en hauteur exactement au niveau de Comportements agonistiques.
Merci d'avance

Bonjour,
je me permets de reposer ma question précédente après de nombreux essais inutiles…