[Résolu] Alignement flex en affichage tablette

Bonjour tout le monde

Je souhaite faire un alignement horizontale pour ma section juste pour un affichage < 992px.
Je vous propose mon code html et css (affichage normal et affichage < 992px)

<div class="container">
		<section>
			<div class="menu">
				<div class="menu-item">1er menu</div>
				<div class="menu-item">2eme menu</div>
				<div class="menu-item">3eme menu</div>
				<div class="menu-item">4eme menu</div>
				<div class="menu-item">5eme menu</div>
				<div class="menu-item">6eme menu</div>
				<div class="menu-item">7eme menu</div>
				<div class="menu-item">8eme menu</div>
			</div>
		</section>
		<article>
			Mon article
		</article>
	</div>

.container {display:flex;flex-direction:row;}
section {width:14%;padding:0.5%;}
.menu {display:flex;flex-direction:column;margin:auto;}
.menu-item{width:auto;font-size:1.1em;padding-left:10px;}
article {width:84%;padding:0.5%;}

/* CSS pour les écrans inférieur à 992px*/
.container {display:flex;flex-direction:column;}
	section {width:auto;}
	.menu {display:flex;flex-wrap:wrap;}
	.menu-item{font-size:0.7em;}
	article {width:auto;}

Mon affichage fonctionne parfaitement pour les grands écrans par contre pour les tablettes et smartphone, je veux qu'au lieu le menu dans soit verticale, je le veux horizontale et qu'il aille a la ligne. Il peut y avoir 10, 20 ou 30 menu.
Je pense, même je suis sur que le problème viens flex-direction:column dans la class container mais il me le faut absolument pour que ma section et mon article soit l'un au dessous de l'autre. Et donc dans ma section, le menu s'affiche verticalement au lieu d'horizontalement.
J'ai fais le test d'affichage sans la class container et cela fonctionne mais j'ai besoin de cette class
J'espère avoir été compréhensible
Modifié par nuyt (28 Aug 2020 - 15:41)

yo,

.container {
  display:flex;
  
}
section {
  width:14%;
  padding:0.5%;
}

.menu{
  display:flex;
  flex-direction:column;
}
.menu-item{
  width:auto;
  font-size:1.1em;
  padding-left:10px;
}
article {
  width:84%;
  padding:0.5%;}

@media (max-width: 992px)  {

/*CSS pour les écrans inférieur à 992px*/
.container {
  display: flex;
  
  }
	section {
    width:auto;
  }
	.menu {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
  }
	.menu-item{
    font-size:1em;
  }
	article {
    width:auto;
  }

}

J'ai modifié ton code css , es-ce que sa règle ton problème?

Bonjour

Désolé pour le retard, j'ai pas eu le temps de me connecter avant. Ca l'air de fonctionner mais il faudra que j'adapte encore un peu mais j'ai pas le tmps pour le moment
Je clos le sujet.
Merci pour le coup de main