我有一个空div，并使用javascript创建其他div。我已经建立了我的CSS，因此它会创建一个网格。我的问题是：我如何动态调整div的大小，使它们均匀地填充它们的容器？在容器的整个高度和宽度上均匀分布DIV儿童

我试图用绘图更好地说明它，但我的绘图技巧并不好。希望你会明白我想要的。

黑方块是父DIV和红色方块是孩子。当我创建一个div时，它应该填充父div（有一点余量）。

有了两个div，它会将父母分成两半。

对于3，它的行为将类似于您在图像的右上角看到的，其他人则如此。

我怎么能用CSS来完成这项工作？

一些更多的信息：

这是我必须为学校做的游戏。这是以前的版本，但你有一个div的方块的想法。接下来的任务是让用户选择他们想玩的方格数。但这必须是动态的，他们必须能够选择像5或8这样的数字。不仅仅是4,9,16,25等，这太容易了。

https://luukwuijster.io/school/csp/kleurenspel/

来源

2017-02-13 Luuk Wuijster

我没有在这里看到一个统一的模式。我看到了大多数这样的独特布局。从1到2很容易，但到3 ...你怎么知道，如果有3，第一个应该是100％的宽度，最后2个是50％？为什么3不是33％的宽度？有某种一致的模式吗？ –

当然，我可以使用百分比，但我不知道用户需要多少个正方形。所以，我不能在这种情况下使用它 –

这是我必须为学校制作的游戏。这是以前的版本，但你会得到div中有正方形的想法。接下来的任务是让用户选择他们想玩的方格数。但这必须是动态的，必须能够选择像5或8这样的数字。不仅仅是4,9,16,25等，这太容易了。 https://luukwuijster.io/school/csp/kleurenspel/ –

这种类型的布局可使用CSS Flexbox的来实现。

首先通过添加display:flex将包装元素转换为柔性盒。接下来，将flex:1 1 auto添加到您的箱子，以允许它们根据需要增长和缩小以填充空间。

为了防止您的箱子被flexbox压扁成一条线，请在其上设置一个min-width值。我已使用min-width:30%，但可以更改此编号以适合您的需求。 30％将意味着在任何时候连续的盒子的最大数量是3（因为它仅低于容器宽度的1/3或33％）。

尝试添加或删除下面示例代码中的框。

#wrapper { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    width:400px; 
 
    height:400px; 
 
} 
 

 
.box { 
 
    background-color:white; 
 
    border:1px solid black; 
 
    min-width:30%; 
 
    flex:1 1 auto; 
 
    }

<div id='wrapper'> 
 
    <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 class='box'></div> 
 
</div>

来源

2017-02-14 09:28:39

嗯。对了谢谢。这正是我一直在寻找的！ –

在容器的整个高度和宽度上均匀分布DIV儿童

一些更多的信息：

回答

相关问题