Aggiungere un separatore di righe orizzontali su righe di articoli fasciabili

Question

Sto utilizzando css flexbox per posizionare un numero sconosciuto di elementi in righe, avvolgendoli a righe aggiuntive se necessario.

La mia domanda è, è possibile avere una linea orizzontale tra ciascuna delle righe?

Here è un semplice esempio di ciò che ho. Se apri la codepen vedrai le voci avvolgere in due righe (potrebbe essere più di due o solo una - dipende dal numero esatto di elementi e dalla larghezza del display). Mi piacerebbe avere una linea orizzontale tra le file.

<div> 
    <span>First item</span> 
    <span>Second item</span> 
    <span>Third item</span> 
    <span>Fourth item</span> 
    <span>Fifth item</span> 
    <span>Sixth item</span> 
</div> 

Con il seguente CSS:

div { 
    border: 1px solid black; 
    width:20%; 
    display: flex; 
    flex-flow: row wrap; 
} 

span { 
    border: 1px solid blue; 
    margin: 5px; 
} 

Answer 1

C'è un modo per aggiungere una linea orizzontale sotto ogni riga utilizzando la proprietà "flex-grow". Tuttavia, se si desidera mantenere esattamente 5 px tra ogni elemento, non so come farlo. In caso contrario, ecco come procedere:

1. Avvolgere ogni intervallo in un div con la stessa classe.
2. Assegna al tuo contenitore flexbox una classe/ID univoca in modo che il suo CSS non venga applicato ai div wrapper. Rimuovere anche il bordo inferiore.
3. Offri al tuo wrapper il margine inferiore desiderato, un po 'di padding e imposta flex-grow: 1.
4. Assegna all'ultimo elemento flessibile un ID con un flex-grow: 1000 o qualche altro numero arbitrariamente grande .

Questo è un JFiddle di questo funzionamento.

Ecco il codice che ho usato:

<style> 
div.flexbox { 
border-left: 1px solid black; 
border-top: 1px solid black; 
border-right: 1px solid black; 
width:50%; 
display: flex; 
flex-flow: row wrap; 
align-items: stretch; 
}  
span { 
border: 1px solid blue; 
margin: 5px; 
}  
.wrap { 
border-bottom: 1px solid black; 
padding: 5px; 
flex-grow: 1; 
} 
#last { 
flex-grow: 1000; 
} 
</style> 
<div class="flexbox"> 
    <div class="wrap"><span>First item</span></div> 
    <div class="wrap"><span>Second item</span></div> 
    <div class="wrap"><span>Third item</span></div> 
    <div class="wrap"><span>Fourth item</span></div> 
    <div class="wrap"><span>Fifth item</span></div> 
    <div class="wrap"><span>Sixth item</span></div> 
    <div class="wrap"><span>Seventh item</span></div> 
    <div class="wrap"><span>Eigth item</span></div> 
    <div class="wrap"><span>Nineth item</span></div> 
    <div class="wrap"><span>tenth item</span></div> 
    <div id="last" class="wrap"><span>Eleventh item</span></div> 
</div> 

Se non ti dispiace l'ultima riga deve essere uniformemente distanziate, allora si può ignorare la parte di aggiungere un ID per l'ultimo elemento con un grande Flex crescere numero