グリッドの最後の子どもたちはフレックスボックススペースの原因を掴む

Question

私は同じように3で分割したい要素のグリッドを持っているので、各行に3つの要素が含まれるようにしたい。私はそれらに同じくぼみを持たせたいので、flexboxを使うときはjustify-content: space-betweenを使いました。これは、最後の行に2つの要素が含まれているときに分かれることに気付くまで、よく見えました。

.blue{ 
 
    width: 420px; 
 
    height: 230px; 
 
    background: blue; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.red{ 
 
    width: 32%; 
 
    height: 100px; 
 
    background: red; 
 
    display: block; 
 
    border-sizing: border-box; 
 
    border: 1px solid white; 
 
} 
 

 
.green{ 
 
    width: 420px; 
 
    height: 230px; 
 
    background: green; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.orange{ 
 
    width: 32%; 
 
    height: 100px; 
 
    background: orange; 
 
    display: block; 
 
    border-sizing: border-box; 
 
    border: 1px solid white; 
 
    margin-right: 1.25%; 
 
} 
 

 
.orange:nth-child(3){ 
 
    margin-right: 0; 
 
}

<section class="blue"> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
</section> 
 

 
<section class="green"> 
 
    <div class="orange"></div> 
 
    <div class="orange"></div> 
 
    <div class="orange"></div> 
 
    <div class="orange"></div> 
 
    <div class="orange"></div> 
 
</section>

そのも意志、私の第二のアプローチは、そのほとんどを修正するようだが、私はそれが応答するようにしたいと1の列の2の行に、モバイル上で破壊されます外見。 javascriptなしでこれを修正するための何かがありますか？私は要素の量の長さに基づいてクラスを追加しようとしていましたが、それはプロフェッショナルではないようです...私はこの場合に私を助けることができる私はまだ知らない何かがあるかもしれません。

Answer 1

flex:1; + min-widthを使用すると、ブレークポイントを作成できます。

擬似要素を使用して、最後の行の一部を埋めることもできます。

.blue{ 
 
    background: blue; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    padding:1em; 
 
} 
 

 
.red, .blue:after{ 
 
    content:''; 
 
    min-width:280px; 
 
    flex:1; 
 
    margin:0 1em; 
 
} 
 
.red { 
 
    margin:1em; 
 
    height: 100px; 
 
    background: red; 
 
    display: block; 
 
    box-sizing: border-box; 
 
    border: 1px solid white; 
 
}

<section class="blue"> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
    <div class="red"></div> 
 
</section>

通常、mediaqueriesはCSSにブレークポイントを設定するために使用されています。この問題に名前を付けるので、それを見てかなり難しいそのリンクのhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries