side-by-side 요소 주위에 이중 테두리 방지

Question

1px 테두리가있는 여러 컨테이너가있는 경우 서로 인접한 모든 컨테이너는 2px 테두리를 생성합니다. 그래서 당신은 항상 예를 ​​들어 설정을 없애기 위해. border-right: none;을 입력 한 다음 마지막 자식에 border-right: 1px;을 추가하여 모든 컨테이너가 모든면에서 1 픽셀의 테두리를 갖도록합니다.

그러나 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

당신은 시도 할 수 있습니다 이러한 솔루션 :

여기서 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; 
} 

이 한 상자 번호 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; 
}