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">
    <a href="#">Accueil</a> 
    <a href="#">Produits</a>
    <a href="#">Nous contacter</a>
    <a href="#">À propos</a>
</div>

CSS

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

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;  
    align-items: center; 
}

.div-flex-contenant a {
    text-decoration: none;
    padding: 1em;
    color: white;
    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 {
    flex-direction: row;
    justify-content: space-around;
    padding: 0;
  }
}

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

Flexbox