Come controllare il numero di elementi per riga utilizzando le query multimediali in Flexbox?

Question

Quindi immaginate Ho il seguente 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> 

E seguenti stili(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; 
} 

Esiste una reale Flexbox CSS alternativa alla mia ipotetica number proprietà che può controlla quanti oggetti mostrare per fila?

La griglia simile a un float era pratica perché si poteva montare un numero illimitato diper uno .row a causa dello width. Ma con flexbox devo usare soluzioni alternative come numerose classi .row per controllare il layout e il numero di elementi con larghezza diversa. Sono stato fortunato finora, ma ci sono alcuni tipi di layout che falliranno con un simile approccio.

Codepen link to demonstrate

Answer 1

ho dovuto sbarazzarsi del margine attorno ai blocchi, perché larghezze percentuali sono difficili da applicare in modo pulito per elementi con margini, ma è possibile visualizzare le modifiche al 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; 
    } 
} 

le parti importanti sono:

• flex-flow: row wrap che permette al FlexBox a comparire su mul righe tiple (il default è nowrap)

• flex-basis che è l'equivalente di width in questo caso

• position: relative che rende le larghezze relative al contenitore, piuttosto che il corpo (ciò avvitare il raccordo)