Flexbox-der Raum zwischen den mit Linien zwischen den Zeilen

Dies ist eine Frage, die ich schon eine Lösung, aber ich Frage mich, ob es einen besseren Weg. Was ich will ist die Verwendung von flexbox zu haben Reihen von Elementen mit noch Platz dazwischen und einer Linie zwischen Zeilen. Die ersten und zweiten Beispiel, in dem snippet unten erreichen dies, indem Sie eine :after, aber ich muss mit einem fairen Betrag von CSS zu verbergen, auf der letzten Zeile.

.item:nth-child(4n + 1):nth-last-child(4):after,
.item:nth-child(4n + 1):nth-last-child(4):after,
.item:nth-child(4n + 1):nth-last-child(2):after,
.item:nth-child(4n + 1):nth-last-child(1):after{
  display: none;  
}

Sicherlich gibt es einen besseren Weg (mit flexbox -) wer weiß?

Ich versucht, mit einer Grenze, die auf jeden Punkt, aber offensichtlich hat dies der Raum zwischen Ihnen, das nicht funktioniert und dann würde ich noch brauchen, um es zu verstecken mit :nth-last-child.

CSS:

.outer{
  background-color: #ccc;
  margin-bottom: 15px;
}

.wrap{
  overflow: hidden;
  flex: 4;
  justify-content: space-between;
  flex-flow: row wrap;
  width: 80%;
  margin: 0 auto;
  background-color: #cdcdcd;
  display: flex;
}

.item{
  width: 23%;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
}
.item2{
  width: 23%;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
  border-bottom: 1px solid red;
}
.item:nth-child(4n + 1):after{
  content: "";
  position: absolute;
  left: 0;
  width: 500%;
  bottom: 0;
  border-bottom: 1px solid red;
}
@media (max-width: 768px) {
  .item:nth-child(2n + 1):nth-last-child(2):after,
  .item:nth-child(2n + 1):nth-last-child(1):after{
    display: none;  
  }
  .item{
    width: 43%;
  }
}
@media (min-width: 768px) {
  .item:nth-child(4n + 1):nth-last-child(4):after,
  .item:nth-child(4n + 1):nth-last-child(4):after,
  .item:nth-child(4n + 1):nth-last-child(2):after,
  .item:nth-child(4n + 1):nth-last-child(1):after{
    display: none;  
  }
}

HTML:

<div class="outer">
  <h3>Working example - 8 Items</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
  </div>
</div>
<div class="outer">
  <h3>Working example - 5 Items</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
  </div>
</div>
<div class="outer">
  <h3>Using normal border</h3>
  <div class="wrap">
      <div class="item2">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item2">Item 3</div>
      <div class="item2">Item 4</div>
      <div class="item2">Item 5</div>
  </div>
</div>

  • Vier-Element für jede Zeile fest oder wird sich ändern?
  • Es ändert sich für kleinere Geräte, die fügt mehr Komplexität, so dass ich nicht gehören, dass in dem Beispiel 🙂
  • Wenn Sie gehen zu 3 Zeilen, in einem kleinen Gerät, So haben wir 3 rote lins? Wenn es ist, ich glaube nicht, dass dein code ist genug.
Schreibe einen Kommentar