Jak kontrolować liczbę przedmiotów w rzędzie za pomocą zapytań o media w Flexboksie?

Question

więc wyobrazić Mam następujący Markup

<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> 

i następujące stylów(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; 
} 

istnieje realne schematu flexbox CSS alternatywa do mojego hipotetycznego number nieruchomości, które można kontrolować, ile pozycji ma pokazywać w jednym rzędzie?

Siatka przypominająca pływak była przydatna, ponieważ można zmieścić nieograniczoną liczbę .items na jeden .row z powodu width. Ale z Flexbox muszę używać obejść jak liczne klasy .row do kontrolowania układu i liczby elementów o różnej szerokości. Do tej pory miałem szczęście, ale istnieje pewien rodzaj układu, który zawiedzie przy takim podejściu.

Codepen link to demonstrate

Answer 1

musiałem pozbyć marginesu wokół bloków, ponieważ szerokości procentowe są trudne do czysto zastosowanie do elementów o marże, ale można zobaczyć zmiany w 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; 
    } 
} 

ważnymi części są tu:

• flex-flow: row wrap który pozwala schematu flexbox pojawiać się na Mul tiple rzędy (domyślnie nowrap)

• flex-basis które jest odpowiednikiem width w tym przypadku

• position: relative co sprawia, że ​​szerokość w stosunku do pojemnika, a nie na korpusie (byłoby to zepsuć zaokrąglenia)