自動將內容調整為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>