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

Imaginez donc j'ai le texte suivant Balisage

<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 suivants styles (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;
}

Est-il un véritable Flexbox CSS alternative à mon hypothétique number propriété qui permet de contrôler le nombre d'éléments à afficher par ligne ?

Le flotteur grille était pratique parce que vous pourriez tenir illimité .items par un .row en raison de la width. Mais avec flexbox-je utiliser des solutions de contournement comme de nombreux .row classes pour le contrôle de la mise en page et le nombre d'objets à différentes largeur. J'ai eu de la chance jusqu'à présent, mais il y a un certain type de mise en page qui va échouer avec une telle approche.

Codepen lien à démontrer

InformationsquelleAutor knitevision | 2015-07-24
  1. 72

    Je devais me débarrasser de la marge de contourner les blocs, car le pourcentage des largeurs sont difficiles à proprement appliquer à des éléments avec des marges, mais vous pouvez voir les changements à http://codepen.io/anon/pen/jPeLYb?editors=110 :

    @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 pièces importantes sont ici:

    • flex-flow: row wrap qui permet à la flexbox pour 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 de la largeur par rapport au conteneur, plutôt que le corps (ce serait gâcher de l'arrondi)

    • btw marge en pixels fonctionne très bien avec le flex. J'ai ajouté margin-right: 100px et cela a fonctionné. Aucun débordement comme dans flotter mises en page. Merci pour la réponse, exactement ce dont j'avais besoin. Forgout à propos de cette propriété
    • Une fois que vous allez pour les flexbox tous les vous ne serez jamais penser à propos de flotteurs qui sont vraiment un vilain hack. Bootstrap de la grille est basée sur des flotteurs. Si vous avez modernes de prise en charge du navigateur, vous pouvez utiliser pure flexbox de cette façon plus facile et plus fort. Il y a un paquet appelé sass-flex-mixin qui cale IE10.
    • Les flotteurs ne sont pas un "méchant hack", ils ont exactement tel qu'il est conçu. Au contraire, l'existence de cette question permet d'illustrer ce qu'est un lousily conçu flexbox est.
    • les flotteurs ne sont pas destinés à être utilisés pour la présentation, mais flottait éléments dans le texte. N'importe qui qui a combattu bizarrement les éléments qui se chevauchent en raison de flotteurs a vu cela.
    • C'est donc un méchant hack ou un moyen de positionner les éléments? Vous allez avoir à faire un choix. Je vois que vous peut-être dire que l'utilisation de flotteurs pour la mise en page n'est pas le meilleur choix aujourd'hui, que j'ai peut convenir avec dans la plupart des cas, mais il n'y a pas de bizareness ou vilain comportement.
    • Hmm, je doute que tu m'avais dis que l'existence de toute question à propos de la flotte (il y a des milliers) ce qui implique une lousily conçu, il est, donc pourquoi dire la même chose au sujet de flexbox?
    • Les flotteurs ont été surchargé parce que les gens trouvés utiles pour plus que ce qu'ils étaient destinés à être, tandis que flexbox était censé être une mise en page messie direct avec l'intention de résoudre la plupart des communes de l'empilement de problèmes. J'ose dire qu'il n'a finalement pas tellement bien conçu et a échoué à résoudre certaines communes usecases qu'il pourrait avoir, à l'instar de cette question. J'ai fait quelques mixin qui changent la façon flexbox travaille pour un aspect plus "photoshop-like" comportement d'alignement, c'est une autre chose que je ne comprends pas à propos de flexbox de la conception, il semble que la pire option. codepen.io/salsita/full/bgxWBX
    • afaics cette réponse ne fournissent pas vraiment quoi que ce soit dans la façon de number: 4; (il peut s'avérer impossible de pure flex) comme indiqué dans l'exemple de code. Le nombre d'éléments par ligne est toujours dépend entièrement de la largeur des éléments. Si je change leur largeur à une valeur définie et puis à d'autres valeurs, je peut encore causer des différents chefs d'éléments dans chaque ligne. Peut-être que je n'ai pas compris la question comme il était destiné à être comprise.

    InformationsquelleAutor Gareth