Responsive flexbox design mit css adjecent selector

Question

Der angrenzende Selektor ist nützlich, um einen Spielraum zwischen Elementen in zB einem Kartenentwurf zu bekommen. Aber wie behältst du das gleiche Design bei, wenn du flexbox verwendest, wenn du reagierende Elemente erstellst. Dies scheint nur den Rand des ersten Elements und nicht das erste Element jeder Zeile zu entfernen. Gibt es elegante Lösungen für dieses Problem? Im Idealfall würden die 8 Elemente gleich aussehen, wenn sie alle auf einer oder vier Zeilen stehen.

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

-Code auch auf jsbin: https://jsbin.com/cusekumiza

Answer 1

Sie die Art und Weise verwenden können, dass die meisten ansprechenden Rahmen, diesen Fall lösen: Verwenden Sie eine „Reihe“ Container „kompensieren“ links und rechten Rand, indem sie negativ ist, wie diese Einstellung:

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

Hier ist mein js Bin: https://jsbin.com/buwezudiju/1/edit?html,output