防止並排元素周圍的雙重邊框

Question

如果您有多個帶有1px邊框的容器，則彼此相鄰的所有容器都會生成2px邊框。所以爲了擺脫這一點，你總是設置border-right: none;，然後將border-right: 1px;添加到最後一個子元素，以使所有容器在所有邊都具有1px邊框。

但是，如果您使用flexbox 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

你可以試試這些解決方案：

這裏你不需要.container:last-child款式。

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

這一個適用於箱數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; 
}