我很想知道如何佈置具有排水溝的柔性網格系統。具有邊緣排水溝的Flexbox網格系統
例如：
在我的筆在下面我有display:flex行，我希望它來包裝，所以我用flex-wrap:wrap。這一切都工作正常，但是當我爲所有列設置25％的寬度時，我必須設置calc的最大寬度（25％ - 25px）。
https://codepen.io/Jesders88/pen/rwbVwP?editors=1100
我想什麼是能夠有一個保證金排水溝，而不必使用鈣或最大，寬度，如果這是可能的。我也不想使用百分比，這樣我就可以在每列上方有一個px單位的設置邊距，並且當有一個裝訂線值時，我可以在左邊設置邊距。所以基本上我想要的是，如果我要設置一個25像素的排水溝，並將一行上的項目數設置爲4，我希望那些在它們之間具有25像素的排水溝，但是如果有意義的話，則拉伸整行的寬度。任何問題只是讓我知道，我會很樂意詳細說明。
一個快速簡便的方法可能是使用內部容器和填充...
這將使「溝」，由柱內的填充形成，這意味着每列可以跨越全希望的寬度爲25％。然後，內容容器將最終成爲你自己的風格，作爲實際的列出現。
所以，你會改變你所有的標記爲列如下：
<div class="column">
<div class="content"></div>
</div>
和你的CSS這樣的：
* {
box-sizing: border-box;
}
.column {
flex-grow:1;
flex-shrink:1;
width:25%;
padding-left:25px;
padding-top:25px;
}
.content {
background:#2848e6;
height:200px;
}
請注意添加box-sizing: border-box;這將使填充到成爲25％寬度的一部分，而不是除此之外。
不得不添加更多標記來解決問題總是令人慚愧，但有時它確實使事情變得更容易！ （毫無疑問，更聰明的方法是單獨使用CSS來完成 - 希望別人也可以將其中的一部分帶入桌面 - 稍後當我有更多時間再回來時，我可能不得不考慮它） –
我看到一個問題。如果你看第一個容器，那麼其餘部分就會更寬。 – jesders88
@ jesders88你是對的，這是由於第一列的'padding-left：0;'造成的。我刪除了它（所有列都有相同的填充），並按照與頂部相同的方式進行，並在該行上簡單地執行了「margin：-25px 0 0 -25px;」。如果刷新筆，則應該看到它們現在尺寸完全相同。接得好！ –
一種方法是使用多行和flex-grow: 1不要在:last-child
html, body {
\t height: 100%;
\t background: #252525;
margin: 0;
}
section {
}
.row {
\t display: flex;
}
.column {
\t flex: 1 0 0;
\t margin-top: 25px;
\t height: 200px;
\t background: #2848e6;
}
.column:not(:last-child) {
\t margin-right: 25px;
}<section>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
</section>使用權margin或者你可以使用margin-right: 15px除了:nth-child(4)和flex-basis的calc(25% - 11.25px)（45px保證金/ 4盒= 11.25）作爲寬度。
html, body {
\t height: 100%;
\t background: #252525;
margin: 0;
}
section {
}
.row {
\t display: flex;
\t flex-wrap: wrap;
}
.column {
\t flex: 0 1 calc(25% - 11.25px);
\t margin-top: 25px;
\t height: 200px;
\t background: #2848e6;
}
.column:not(:nth-child(4n)) {
\t margin-right: 15px;
}<section>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
</section>您可以使用grid-column-gap和fr單位display: grid;做到這一點很容易。
html, body {
\t height: 100%;
\t background: #252525;
margin: 0;
}
section {
}
.row {
\t display: grid;
\t grid-template-columns: 1fr 1fr 1fr 1fr;
\t grid-column-gap: 25px;
\t grid-row-gap: 25px;
}
.column {
\t height: 200px;
\t background: #2848e6;
}<section>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
</section>
是您打開使用'grid'？ https://codepen.io/mcoker/pen/WOWQGP?editors=1100 –
我寧願使用flexbox。支持似乎好得多。 – jesders88
如果您對列使用固定邊距，我認爲獲得列填充行的唯一方法是使用'flex-grow：1'，這不適用於包裝或使用的行calc（）就像你一樣。你打算多行嗎？ –