Empêcher la double bordure autour des éléments côte à côte

Question

Si vous avez plusieurs conteneurs avec une bordure 1px, tous les conteneurs l'un à côté de l'autre génèrent une bordure de 2px. Donc, pour se débarrasser de cela, vous définissez toujours par ex. border-right: none;, puis ajoutez border-right: 1px; au dernier enfant pour que tous les conteneurs aient une bordure 1px de tous les côtés.

Mais si vous utilisez la règle flexbox flex-basis pour casser des conteneurs dans la ligne suivante, cela casse toute l'idée border-right, le dernier conteneur de la ligne avant la pause reste toujours à l'écart sans bordure.

par exemple. dans cet exemple, j'ai 5 conteneurs, mais je veux 4 par ligne et quand il se brise en nouvelle ligne, vous pouvez voir la question border-right:

.wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 400px; 
 
} 
 

 
.container { 
 
    flex-basis: 20%; 
 
    border: 1px solid #000; 
 
    border-right: none; 
 
    margin-bottom: 1px; 
 
    min-height: 100px; 
 
    width: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.container:last-child { 
 
    border-right: 1px solid #000; 
 
}

<div class="wrapper"> 
 
    <div class="container">1</div> 
 
    <div class="container">2</div> 
 
    <div class="container">3</div> 
 
    <div class="container">4</div> 
 
    <div class="container">5</div> 
 
</div>

https://jsfiddle.net/45kngj9p/

Answer 1

Puisque vous savez combien d'éléments flex il y a dans chaque ligne, vous pouvez utiliser la :nth-child() sélecteur pour appliquer des bordures aux éléments manqués par la règle principale.

.wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 400px; 
 
} 
 
.container { 
 
    flex-basis: 20%; 
 
    border-top: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
    margin-bottom: 1px; 
 
    min-height: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.container:nth-child(4n + 1) { /* add border to first child in each row */ 
 
    border-left: 1px solid red; 
 
}

<div class="wrapper"> 
 
    <div class="container">1</div> 
 
    <div class="container">2</div> 
 
    <div class="container">3</div> 
 
    <div class="container">4</div> 
 
    <div class="container">5</div> 
 
</div> 
 

 
<hr> 
 

 
<div class="wrapper"> 
 
    <div class="container">1</div> 
 
    <div class="container">2</div> 
 
    <div class="container">3</div> 
 
</div> 
 

 
<hr> 
 

 
<div class="wrapper"> 
 
    <div class="container">1</div> 
 
    <div class="container">2</div> 
 
    <div class="container">3</div> 
 
    <div class="container">4</div> 
 
    <div class="container">5</div> 
 
    <div class="container">6</div> 
 
    <div class="container">7</div> 
 
    <div class="container">8</div> 
 
    <div class="container">9</div> 
 
    <div class="container">10</div> 
 
</div>

Answer 2

Vous pouvez ces solutions:

Ici vous n'avez pas besoin du .container:last-child styles.

.container { 
    flex-basis: 20%; 
    border: 1px solid #000; 
    margin-bottom: 1px; 
    margin-right: -1px; 
    min-height: 100px; 
    width: 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

Celui-ci fonctionne pour les boîtes numéro 4, 8, 12, etc.

.container { 
    flex-basis: 20%; 
    border: 1px solid #000; 
    border-right: none; 
    margin-bottom: 1px; 
    min-height: 100px; 
    width: 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.container:last-child, 
.container:nth-child(4n) { 
    border-right: 1px solid #000; 
}