Flexbox Abstand zwischen mit Zeile zwischen Zeilen

Question

Dies ist eine Frage, die ich bereits eine Lösung haben, aber ich frage mich, ob es einen besseren Weg gibt. Was ich will, ist, flexbox zu verwenden, um Reihen von Gegenständen mit gleichmäßigem Raum dazwischen und einer Linie zwischen Reihen zu haben. Das erste und das zweite Beispiel im Snippet unten erreichen dies mit einem :after, aber ich muss eine Menge CSS verwenden, um es in der letzten Zeile zu verstecken.

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

Sicher gibt es einen besseren Weg (mit flexbox) Weiß jemand?

Ich habe versucht, einen Rahmen für jedes Element verwenden, aber offensichtlich hat dies Platz zwischen ihnen, die nicht funktioniert, und dann würde ich es immer noch mit :nth-last-child verstecken müssen.

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

<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>

Answer 1

könnten Sie :before verwenden und vermeiden Sie die display:none Regeln:

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

 
.wrap{ 
 
    overflow: hidden;/* will hide first row of item:before */ 
 
    /* flex: 4; i do not see the use here */ 
 
    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{/* just to do it different , don ' t mind that part */ 
 
    width: 23%; 
 
    padding : 30px 0; 
 
    margin-bottom: -10px; 
 
    position: relative; 
 
    border-bottom: 1px solid red; 
 
} 
 
.item:nth-child(4n + 1):before{ 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 500%; 
 
    top: -30px; 
 
    border-bottom: 1px solid red; 
 
}

<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>

---

bearbeiten

Sie auch eine Pause einstellen Punkt und jedes Element verwenden, um die Linie

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

 
.wrap{ 
 
    overflow: hidden;/* will hide first row of item:before */ 
 
    /* flex: 4; i do not see the use here */ 
 
    justify-content: space-between; 
 
    flex-flow: row wrap; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background-color: #cdcdcd; 
 
    display: flex; 
 
} 
 

 
.item{ 
 
    width: 23%; 
 
    margin: 29px 1% 31px; 
 
    position: relative; 
 
} 
 
.item2{/* just to do it different , don ' t mind that part */ 
 
    width: 23%; 
 
    padding : 30px 0; 
 
    margin-bottom: -10px; 
 
    position: relative; 
 
    border-bottom: 1px solid red; 
 
} 
 
.item:before{ 
 
    content: ""; 
 
    position: absolute; 
 
    left: -20%; 
 
    width: 800%; 
 
    top: -30px; 
 
    border-bottom: 1px solid red; 
 
} 
 
.brkpt .item { 
 
    min-width:60px; 
 
    max-width:100px; 
 
    background:gray 
 
    }

<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> 
 
<h3>Working example - 16 Items breaking points every 120px average</h3> 
 
    <div class="wrap brkpt"> 
 
     <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 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>

Answer 2

Ich dachte an eine andere Art und Weise. Dies ist eine reaktionsfähige Lösung. Ich denke, dass dies der beste Weg ist ... 4 Spalten sehen Sie die volle Seite Taste

.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; 
 
} 
 
.full{ 
 
    width: 100%; 
 
    background-color: red; 
 
    margin-bottom: 30px; 
 
    height: 1px; 
 
    display: none; 
 
} 
 
@media (max-width: 768px) { 
 
    .visible-small{ 
 
    display: block; 
 
    } 
 
} 
 
@media (min-width: 768px) { 
 
    .visible-large{ 
 
    display: block; 
 
    } 
 
} 
 
.item{ 
 
    width: 23%; 
 
    margin-bottom: 30px; 
 
    position: relative; 
 
}

<div class="outer"> 
 
    <h3>Using extra div</h3> 
 
    <div class="wrap"> 
 
     <div class="item">Item 1</div> 
 
     <div class="item">Item 2</div> 
 
     <div class="full visible-small"></div> 
 
     <div class="item">Item 3</div> 
 
     <div class="item">Item 4</div> 
 
     <div class="full visible-large visible-small"></div> 
 
     <div class="item">Item 5</div> 
 
    </div> 
 
</div> 
 
<div class="outer"> 
 
    <h3>Using extra div</h3> 
 
    <div class="wrap"> 
 
     <div class="item">Item 1</div> 
 
     <div class="item">Item 2</div> 
 
     <div class="full visible-small"></div> 
 
     <div class="item">Item 3</div> 
 
     <div class="item">Item 4</div> 
 
     <div class="full visible-large visible-small"></div> 
 
     <div class="item">Item 5</div> 
 
     <div class="item">Item 6</div> 
 
     <div class="full visible-small"></div> 
 
     <div class="item">Item 7</div> 
 
     <div class="item">Item 8</div> 
 
     <div class="full visible-large visible-small"></div> 
 
     <div class="item">Item 9</div> 
 
    </div> 
 
</div>

Answer 3

Wie ich in kleinen Geräten sagte klicken müssen Sie ernstes Problem mit dieser Methode haben wird. Ich schlage vor, Sie dieses Bild zu verwenden:

Als bcackground Bild des gesamten Menüs (<div class="wrap"), natürlich mit einigen der Höhe von Menüpunkten bedingten Veränderungen.

.wrap{ 
    background-image: url(IMAGE-URL); 
    background-repeat: repeat; 
}