並んでいる要素の周りの二重の境界線を防止する

Question

1pxの境界線を持つ複数のコンテナがある場合、隣り合うすべてのコンテナは2pxの境界線を生成します。だから、あなたはいつも例えばあなたのことを設定することを取り除くために。 border-right: none;と最後の子にborder-right: 1px;を追加すると、すべてのコンテナにすべての面で1ピクセルの境界線が作成されます。

フレックスボックスflex-basisルールを使用してコンテナを次の行に分割すると、全体が破損する前の行の最後のコンテナがborder-rightというアイデアを破ります。

この例では、私は5個のコンテナを持っていますが、私は行ごとに4をしたいし、それが新しい行に侵入したとき、あなたは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

あなたは、各行にあるどのように多くのフレックス項目を知っているので、あなたが使用することができます:nth-child()セレクタは、メインルールで見逃したアイテムにボーダを適用します。

.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

あなたが試すことができますこれらのソリューション：

ここでは01は必要ありませんスタイル。

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

この1つはボックス番号4、8、12、などのために働く

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