Flexbox'ta ortam sorgularını kullanarak satır başına öğe sayısı nasıl kontrol edilir?

Question

Yani İşaretleme

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

Ve aşağıdaki stilleri(SUKDÖ)

@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; 
} 

benim varsayımsal number özelliğine gerçek flexbox'a CSS alternatif var mı şu ben hayal olduğunu can Satır başına kaç öğe gösterilecek?

Float benzeri ızgara, width nedeniyle bir için .items sınırına sığabileceğinden kullanışlıdır. Ancak, flexbox ile farklı genişlikteki öğelerin düzenini ve sayısını kontrol etmek için çok sayıda .row sınıfı gibi geçici çözümler kullanmalıyım. Şimdiye kadar şanslıydım, ancak böyle bir yaklaşımla başarısız olacak belirli bir düzen türü var. Yüzde genişlikleri temiz marjları ile elemanlarına uygulamak zor olduğundan

Codepen link to demonstrate

Answer 1

Ben, blokların etrafında marjı kurtulmak zorunda kaldı, ama sen http://codepen.io/anon/pen/jPeLYb?editors=110 değişiklikleri görebilirsiniz:

@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; 
    } 
} 

burada önemli parçalardır: FlexBox mul görüntülenmesini sağlar

• flex-flow: row wrap tiple satırlar Bu durumda gövde kısmı, daha kaba göre genişlikleri yapar

• position: relative içinde width eşdeğerdir

• flex-basis (bu screw yuvarlama) (varsayılan nowrap olan)