我正在嘗試創建一個看起來像這樣的 flexbox 網格
基本的網格布局很容易創建，但我很難添加元素之間的間距。正如您在代碼片段中看到的，第二行中的間距無法正常作業。
#flexContainer {
display: flex;
flex-direction: column;
gap: 16px;
height: 200px;
width: 600px;
}
.rowContainer {
display: flex;
flex-direction: row;
gap: 16px;
}
.thirdElement {
flex-grow: 1;
height: 40px;
background-color: red;
}
.twoThirdsElement {
flex-grow: 2;
height: 40px;
background-color: red;
}<div id="flexContainer">
<div class="rowContainer">
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
</div>
<div class="rowContainer">
<div class="twoThirdsElement">
</div>
<div class="thirdElement">
</div>
</div>
</div>uj5u.com熱心網友回復：
使用 CSS 網格
#flexContainer {
display: flex;
flex-direction: column;
gap: 16px;
}
.rowContainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.thirdElement {
height: 40px;
background-color: red;
}
.twoThirdsElement {
grid-column:span 2;
height: 40px;
background-color: red;
}<div id="flexContainer">
<div class="rowContainer">
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
</div>
<div class="rowContainer">
<div class="twoThirdsElement">
</div>
<div class="thirdElement">
</div>
</div>
</div>uj5u.com熱心網友回復：
在我看來，這就像一個三列網格，第四項跨越兩列。
這是一個簡化版本。顯然，您需要根據需要對專案進行樣式設定。
#flexContainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
height: 200px;
width: 600px;
}
#flexContainer>* {
background-color: red;
}
.twoThirdsElement {
grid-column: auto / span 2;
}<div id="flexContainer">
<div>
</div>
<div>
</div>
<div>
</div>
<div class="twoThirdsElement">
</div>
<div>
</div>
</div>uj5u.com熱心網友回復：
你不需要<div >。它只修復了一個flex屬性#flexContainer。
#flexContainer {
display: flex;
flex-wrap: wrap;
height: calc(80px (600px / 20)); /* (600px/20) == 5% of 600px. result = 80px 5%(600px). it is for a gap between rows that is equal with gap: 5%; for columns.*/
align-content: space-between;
gap: 5%;
width: 600px;
}
.thirdElement {
flex-basis: 30%;
height: 40px;
background-color: red;
}
.twoThirdsElement {
flex-basis: 65%;
height: 40px;
background-color: red;
}<div id="flexContainer">
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="thirdElement">
</div>
<div class="twoThirdsElement">
</div>
<div class="thirdElement">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436796.html