Aller au contenu

Flexbox et requêtes média

Évidemment, on peut utiliser les media query avec les flexbox pour couvrir le comportement que ces derniers doivent prendre pour différentes tailles d'écrans.

CSS

.div-flex-contenant {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

@media screen and (min-width:600px) {
    .div-flex-contenant{
        flex-direction: row;
    }
}

Flexbox

HTML

<div class="div-flex-contenant">
    <div><a href="#">Accueil</a> </div>
    <div><a href="#">Produits</a></div>
    <div><a href="#">Nous contacter</a></div>
    <div><a href="#">À propos</a></div>
</div>

CSS

.div-flex-contenant{
    margin: 0; 
    background: deepskyblue;

    display: flex;
    flex-flow: column wrap;   
}

.div-flex-contenant a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
    text-align: center; 
    border-top: 0.1rem solid rgba(255,255,255,0.3); 
    border-bottom: 0.1rem solid rgba(0,0,0,0.1); 
}

@media screen and (min-width: 600px) {
  .div-flex-contenant {
    justify-content: space-around;
    flex-flow: row wrap;
    padding: 0;
  }
}

@media screen and (min-width: 900px) {
  .div-flex-contenant {
     justify-content: flex-end;
  }
}

Flexbox