Display flex et media queries

Bonjour,

Je tente d'utiliser flex box pour faire un alignement vertical (le display table c'est pas top).

#wrapper .row
	{
	display: flex;
	align-items: center;
	justify-content: center;
	}

Jusque là, c'est cool. Par contre, dès que je mets une media query, ça se gatte :

@media screen and (min-with: 992px)
{
#wrapper .row
	{
	display: flex;
	align-items: center;
	justify-content: center;
	}
}

Le display flex est interprété même en-dessous de 992px. Ça m'étonne beaucoup. J'ai même tenté :

#wrapper .row
	{
	display: block;
	}
}

@media screen and (min-with: 992px)
{
#wrapper .row
	{
	display: flex;
	align-items: center;
	justify-content: center;
	}
}

Forcément ça ne marche pas...

J'utilise bootstrap mais je ne pense pas que ça soit l'origine du problème : quand je fais une inspection de code avec firebug, le display:flex est appliqué sur la div en 991px et moins. Ça voudrait donc dire que flexbox ne peut pas être utilisé avec une media query ? J'ai cherché sur le net je n'ai pas trouvé de réponse probante.

Merci

Bonjour !
Et avec :

deejay-bee a écrit :

@media screen and (min-width: 992px)

, ça marche mieux ?

Bonjour,

Oui comme Zelena te le fait remarquer, il n'y a aucune raison pour que ton code ne fonctionne pas si ce n'est qu'à cause d'une erreur de syntaxe (recopie, faute de frappe, inattention.. appel ça comme tu veux).

Deejay-bee a écrit :
Ça voudrait donc dire que flexbox ne peut pas être utilisé avec une media query ?

t'es fou, ils jouent à touche-pipi dans la cours de l'école

Bon courage !
Modifié par Greg_Lumiere (28 Apr 2016 - 14:30)

Bonjour,

les couleurs vives égaient le quotidien notamment en aidant à déboguer (c'est vendredÿ)

Actif, pas actif ? Ça se voit immédiatement avec :

#wrapper .row {
  background: blue;
}

@media screen and (min-width: 992px) {
  #wrapper .row {
    background: tomato;
  }
}

EDIT : si ton code CSS ne passe pas le validateur, commence par là
Modifié par Felipe (29 Apr 2016 - 14:27)