Dodawanie poziomego separatora wierszy w wierszach elementów zawijania

Question

Używam css flexbox do umieszczania nieznanej liczby elementów w wierszach, zawijanie do dodatkowych wierszy, jeśli to konieczne.

Moje pytanie brzmi, czy można uzyskać poziomą linię między każdym z rzędów?

Here to prosty przykład tego, co mam. Jeśli otworzysz codepen, zobaczysz, że elementy zawijają się w dwie linie (może to być więcej niż dwie lub tylko jedna - zależy to od dokładnej liczby elementów i szerokości wyświetlacza). Chciałbym mieć poziomą linię między rzędami.

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

z następującymi CSS:

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

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

Answer 1

Jest na to sposób, aby dodać linię poziomą pod spodem każdego wiersza przy użyciu "flex-rosnąć" mienia. Jednakże, jeśli chcesz zachować dokładnie 5px pomiędzy każdą pozycją - nie znam sposobu, aby to osiągnąć. Jeśli nie, to jak to zrobić:

1. Owiń każdy przęśnik w dziale z tą samą klasą.
2. Daj swojemu kontenerowi Flexbox unikatową klasę/identyfikator, aby jego CSS nie został zastosowany do opakowujących elementów div. Usuń także jego dolną krawędź.
3. Daj swojej klasie otokę, którą chcesz, trochę wyściółki i ustaw flex-grow: 1.
4. Podaj ostatni element flex id z flex-grow: 1000 lub inną dowolnie dużą liczbą .

Oto JFiddle tego działa.

Oto kod użyłem:

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

Jeśli nie przeszkadza ci ostatni rząd są rozmieszczone równomiernie, można zignorować część o dodanie identyfikatora do ostatniego elementu z większym Flex rosną liczbę.