多種尺寸的CSS Flex動態網格

Question

我有一個Flex的問題。

我有一個包裝，其中最少1和最多9個方塊可以顯示。根據網格中的正方形數量，正方形可以有多種尺寸。 我已經得到了，除了一個工作所需的所有情況下，如在這樣的畫面：

我的風格是：

.grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-content: space-between; 
    width: 300px; 
    height: 300px; 
    position: relative; 
} 

加。圖像的大小取決於它們的總數以及它們在列表中的位置。

所以問題是在我有一個大方塊（佔用4個小方塊的位置）和5個小方塊從右邊和底部的情況下。

大的應該是第一個。

他旁邊（右上角）是第二個，這也是正確的。

第三個在左下角，它應該在第二行和最右邊。由於這一個，所有其他人都處於錯誤的位置，所以最後一個溢出。

我已經嘗試了很多值組合爲justify-content，align-content，align-items和align-self，但沒有工作過。

如果沒有靈活的解決方案，我會回到大量的課程中，並確定絕對的解決方案。但我不喜歡它。它的風格太多，看起來不太好。

任何意見將不勝感激。

Answer 1

我認爲浮動對你是一個更好的選擇，看看這個片斷：

.grid { 
 
    width: 300px; 
 
} 
 

 
.box { 
 
    background: orange; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
    float: left; 
 
} 
 

 
.wide { 
 
    width: 190px; 
 
} 
 

 
.tall { 
 
    height: 190px; 
 
} 
 

 
.empty { 
 
    background: transparent 
 
} 
 

 

 
/* you can ignore everything after this comment - it's all for illustration */ 
 
body { 
 
    background: #334; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 

 
.example { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    border: 1px solid #445; 
 
    padding: 10px; 
 

 
    width: 300px; 
 
} 
 

 
h3 { 
 
    margin: 0 0 5px 0; 
 
}

<div class="example"> 
 
    <h3>Example 1</h3> 
 
    <div class="grid"> 
 
    <div class="box wide tall"></div> 
 
    <div class="box tall empty"></div> 
 
    <div class="box wide empty"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 

 
<div class="example"> 
 
    <h3>Example 2</h3> 
 
    <div class="grid"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 

 
<div class="example"> 
 
    <h3>Example 4</h3> 
 
    <div class="grid"> 
 
    <div class="box wide tall"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

的Flex仍然在努力使元素的完整行，所以你的大廣場和你的小正方形是一排的一部分;除此之外，不支持堆疊。

另一方面，浮動試圖將元素填充到適合它們的地方。

編輯

我已經更新了這個答案對如何重現最上面的圖像的例子（我已經有意留出了2×2的例子 - 不想雲的答案1.5高度/寬度的盒子類）。

使用empty類從塊中刪除顏色，以及類tall和wide填充所有尺寸的點應該幫助您自定義佈局，但是您認爲合適。一個注意 - 這裏empty設置背景顏色爲transparent。你的empty班可能會做更多或更少。你甚至可能不需要empty類，如果它是一個沒有內容的div。

Answer 2

在單個容器中無法使用flex處理此佈局。

你需要做一些小技巧來實現它。

較容易的人會採取第三項出柔性佈局，絕對定位是：

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-between; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    background-color: lightblue; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0px; 
 
    border: transparent solid 5px; 
 
    box-sizing: border-box; 
 
    background-clip: content-box; 
 
} 
 

 
.item:first-child { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.item:nth-child(2) { 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 100px; 
 
    right: 0px; 
 
}

<div class="grid"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div>

另一個posibility，可能更柔性的想法，但也棘手的

設置一個大的元素與邊緣底部負面，這使得它只佔用1行（是一個行的高度小盒子的大小）。

現在有一個3行的佈局。問題在於第三個盒子將在第一個大盒子下面。爲了解決這個問題，我們設置了一個僞元素（我已將樣片設置爲可見，在生產中將其設置爲高度0並且它將消失），其具有與第一元素的寬度和邊距相同的屬性。

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-between; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    order: 3; 
 
    background-color: red; 
 
    width: 190px; 
 
    height: 10px; 
 
    margin: 5px; 
 
} 
 

 
.item { 
 
    background-color: lightblue; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
} 
 

 
.item:first-child { 
 
    width: 190px; 
 
    height: 190px; 
 
    margin-bottom: -100px; 
 
    order: 1; 
 
    opacity: 0.5; 
 
} 
 

 
.item:nth-child(2) { 
 
    order: 2; 
 
} 
 

 
.item:nth-child(n+3) { 
 
    order: 4; 
 
}

<div class="grid"> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div> 
 
<div class="item">6</div> 
 
</div>