css補助セレクタを使用した応答フレックスボックスのデザイン

Question

隣接するセレクタは、カードデザインなどの要素間にマージンを取るのに便利です。しかし、応答性のある要素を作成する際にflexboxを使用する場合、どのように同じデザインを維持しますか？これは、最初の要素のマージンのみを削除するように見えますが、すべての行の最初の要素にはマージンがありません。この問題に対する優雅な解決法はありますか？理想的には、8つの要素がすべて1行または4行にあるときに同じように見えます。

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.card { 
 
    height: 250px; 
 
    width: 250px; 
 
    background-color: blue; 
 
} 
 

 
.card+.card { 
 
    margin-left: 10px; 
 
}

<div class="container"> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</div>

コードもjsbin上：https://jsbin.com/cusekumiza

Answer 1

あなたは応答フレームワークのほとんどがこのケースを解決する方法を使用することができます。左側の「補う」ために「行」の容器を使用し、右マージンを負の値に設定すると、次のようになります。

.container { 
     display: flex; 
     flex-wrap: wrap; 
     //this will "cancel" the margin on the left an right side 
     margin-left:-10px; 
     margin-right:-10px; 
     justify-content:space-between; //this is to justify block on left and right side 
    //but it will set auto margin between block, don't set if you don't care of the right side 
    } 
    .card { 
     height: 250px; 
     width: 250px; 
     background-color: blue; 
     margin: 10px; // you appli normally the margin for your block 
    } 

ここは私のjs Binです：https://jsbin.com/buwezudiju/1/edit?html,output