1
votes

Pourquoi CSS Flexbox ne fonctionne-t-il pas avec la requête multimédia?

J'ai un conteneur flexbox qui contient 3 conteneurs avec un nom de classe de colonne. J'essaye de changer tous les éléments qui ont la colonne de nom de classe à 100%. Lorsque je modifie ma taille d'écran inférieure à 500px, la requête multimédia css doit changer la largeur de la colonne à 100%, mais pour une raison quelconque, ce n'est pas le cas. Toute aide serait appréciée.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>

<meta content="width=device-width, initial-scale=1" name="viewport" />  
<style>

.container{
    max-width:1000px;
    margin:0 auto;
    display:flex;
}


@media all and(max-width:500px){

    .column{
        width:100%;
    }
}

</style>
</head>

<body>

<div id="wrapper">

        <div class="container"> 
                <div class="column">
                  <h3>Column 1</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 2</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
        </div>

</div>

</body>
</html>

html css flexbox

0 commentaires

3 Réponses :

2
votes

Changer l'affichage ou la direction de flexion du conteneur lorsque la taille est petite devrait fonctionner:

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        flex-direction: column;
    }
}

Ou:

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        display: block;
    }
}

comme vous pouvez voir dans cette démo:

https://codepen.io/jeprubio/ stylo / yLyGZPY

0 commentaires

0
votes

Un conteneur flexbox essaie initialement d'utiliser tout l'espace pour les partager entre ses fils. Cependant, vous pouvez éviter cela en utilisant flex-wrap: wrap; .

N'oubliez pas que vous devrez peut-être ajuster la largeur des conteneurs enfants pour fonctionner comme prévu.

Travail démo .

0 commentaires

0
votes

Flexbox essaie par défaut de tout mettre sur une seule ligne. Vous pouvez forcer le changement de ce comportement avec flex-wrap . < pre> XXX

Démo: https://codepen.io/timohausmann/pen/ rNaoPpM

0 commentaires