Si tiene varios contenedores con borde de 1px, todos los contenedores uno al lado del otro generan un borde de 2px. Entonces, para deshacerse de eso, siempre configura p. border-right: none; y luego agregue border-right: 1px; al último elemento secundario para que todos los contenedores tengan un borde de 1 px en todos los lados.

Pero si usa la regla flexbox flex-basis para dividir los contenedores en la siguiente línea, se rompe toda la idea border-right, el último contenedor en la línea antes de la ruptura siempre se queda sin borde.

P.ej. en este ejemplo tengo 5 contenedores, pero quiero 4 por línea y cuando se divide en una nueva línea, puede ver el problema 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/

3
user3108268 18 oct. 2017 a las 16:35

3 respuestas

La mejor respuesta

Dado que sabe cuántos elementos flexibles hay en cada fila, puede usar el selector :nth-child() para aplicar bordes a los elementos omitidos por la regla principal.

.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>
1
Michael Benjamin 18 oct. 2017 a las 15:02

Puedes probar estas soluciones:

1

Aquí no necesitas los estilos .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;
}

2

Este funciona para las casillas número 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;
}
-2
veroreinah 18 oct. 2017 a las 13:45

Elimine Border:none; y agregue margin-left:-1px;

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

¡Eso es!

0
yukashima huksay 19 oct. 2019 a las 11:51