多种尺寸的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>