自动将内容调整为div

Question

我有一个<div class="row"> ，它将包含动态生成的按钮（基本上我需要使用框）

我需要父div的大小固定，但需要根据插入的按钮数自动调整其内容的大小（以适应一行中的所有内容）。

考虑以下布局：

我尝试过的所有解决方案都需要固定宽度，否则将在新行中绘制方框。

我的最后一个选择是使用ng-style并将宽度设置为100 /箱数。 我需要其他解决方案。

到目前为止我尝试过的一件事：

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 1

使用flexbox

 div { display: flex; } button { flex: 1 1; } 

 <div> <button>1</button> <button>2</button> <button>3</button> <button>4</button> </div> 

例如 与您的代码。

 .wrap { width: 80%; margin: 0 auto; display: flex; } .wrap div { flex: 1 1; padding-bottom: 23%; background: gold; border: 1px solid; } 

 <div class="wrap"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 2

仅使用flexbox不会削减它。 如果您需要在添加更多框时保持框的正方形形状，则还需要使用一些JavaScript。

我们在做什么？

• 我们要添加更多的盒子并通过维护一个迭代变量（i）来更改它们的高度，该变量检查存在多少盒子并根据宽度划分高度。 由于如果有3个盒子，则宽度是固定的，因此高度应等于每个项目的宽度。
• 您可以实现一个功能，该功能可以计算加载时的盒子数量，并根据此大小调整伸缩容器的高度，以使盒子保持正方形尺寸。

   var flex = document.getElementById("container"); var box = document.getElementById("box1"); var i=1; function add() { i++; var cln = box.cloneNode(true); cln.removeAttribute("id"); flex.appendChild(cln); flex.style.height=(flex.clientWidth/i) + 'px'; } 

   .flexc { display: flex; width: 400px; height:400px; } .box { flex: 1; border-radius: 20px; background: olive; margin:1px; } 

   <button id="add" onclick="add()">Add more boxes</button> <div class="flexc" id="container"> <div class="box" id="box1"></div> </div>