web-dev-qa-db-fra.com

Comment contrôler le nombre d'éléments par ligne à l'aide de requêtes multimédia dans Flexbox?

Alors, imaginez que j'ai les balises suivantes 

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Et les styles suivants (SASS)

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    display: flex;

    @include max-width(992px) {
        number: 4; //Hypothetical property that is supposed to control number per row
    }

    @include max-width(640px) {
        number: 2; //Hypothetical property that is supposed to control number per row
    }
}
.item {
    background-color: tomato;
    padding: 20px;
    margin-right: 20px;
    flex: 1;
}

Existe-t-il une réelle alternative Flexbox CSS à ma propriété hypothétique number pouvant contrôler le nombre d'éléments à afficher par ligne?).

La grille de type float était pratique car vous pouviez utiliser un nombre illimité de .items par un .row à cause de width. Mais avec flexbox je dois utiliser des solutions de contournement telles que de nombreuses .row classes pour contrôler la disposition et le nombre d'éléments de différentes largeurs. J'ai eu de la chance jusqu'à présent, mais il existe un certain type de mise en page qui échouera avec une telle approche.

lien vers le Codepen pour démontrer

csssassflexboxmedia-queries
36
knitevision

Je devais me débarrasser de la marge autour des blocs, car les pourcentages de largeur sont difficiles à appliquer proprement aux éléments avec des marges, mais vous pouvez voir les modifications sur http://codepen.io/anon/pen/jPeLYb? éditeurs = 11 :

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
}
.item {
    background-color: tomato;
    box-sizing: border-box;
    padding: 20px;
    outline: 2px solid blue;
    flex: 1;
}

@include max-width(992px) {
    .item {
        flex-basis: 25%;
        background-color: red;
    }
}

@include max-width(640px) {
    .item {
        flex-basis: 50%;
        background-color: green;
    }
}

Les parties importantes ici sont:

  • flex-flow: row wrap qui permet à flexbox d'apparaître sur plusieurs lignes (la valeur par défaut est nowrap)

  • flex-basis qui est l’équivalent de width dans ce cas

  • position: relative qui fait les largeurs par rapport au conteneur plutôt que par rapport au corps (cela ferait foirer l’arrondi)

71
Gareth