行間行間的Flexbox空間

Question

這是一個我已經有解決方案的問題，但我想知道是否有更好的方法。我想要的是使用flexbox的行之間有空間的行和行之間的行。以下代碼片段中的第一個和第二個示例通過使用:after來實現此目的，但我必須使用相當數量的CSS將其隱藏在最後一行。

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

當然有更好的方法（使用flexbox）有誰知道嗎？

我試着用在每個項目上邊框，但顯然這有他們之間的空間，不工作，那麼我仍然需要使用:nth-last-child隱藏。

.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

你可以使用:before，避免display:none規則：

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

---

編輯

您還可以設置一個斷點點並使用每個項目劃清界線

.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

我想到了另外一個辦法。這是一個響應式解決方案。我認爲這是要看到4列的最佳途徑...... 你需要點擊整頁按鈕

.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

正如我在小設備說，你將有嚴重的問題，用這種方法。我建議你使用這個圖片：

由於總菜單（<div class="wrap"）的bcackground圖像，當然有相關的菜單項的高度一些變化。

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