CSS - 缩放 flexbox 内容以适合

Question

假设我有一个 flexbox ，我用一些正方形填充......

 const init = () => { const container = document.querySelector('.container') for(const i of Array(70).keys()){ const square = document.createElement('div') square.classList.add('square') container.appendChild(square) } } init()

 * { box-sizing: border-box; }.container { height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }.square{ background-color: orange; height: 8em; width: 8em; margin: .2em; perspective: 1000px; }

 <div class="container"> </div>

我现在希望这些正方形缩小，直到全部适合非滚动容器（当然，同时保持纵横比）。

我怎么做？

Answer 1

这是一个非常手动的解决方案。 如果您正确设置mainContainer的宽度和高度，它将保持同步。

 const init = () => { const container = document.querySelector('.container'); const l = 70; //how many element you want const h = container.clientHeight; const w = container.clientWidth; for(const i of Array(l).keys()){ const square = document.createElement('div') square.classList.add('square'); const x = parseInt(Math.sqrt((w*h) / (l))); const xcount = Math.ceil(w/x); const xLength = Math.ceil(w / xcount); const ycount = Math.ceil((l/xcount)); const yLength = parseInt(h / ycount); const edge = Math.min(xLength, yLength); square.style.width = edge + "px"; square.style.height = edge + "px"; container.appendChild(square) } } init()

 * { box-sizing: border-box; }.mainContainer{ width: 500px; height: 150px; min-height: 100%; background-color: #dfdfdf; }.container { height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }.square{ background-color: orange; border: solid 1px; height: 1px; width: 1px; }

 <div class="mainContainer"><div class="container"> </div></div>

Answer 2

我试过这个但是当你调整大小时需要重新加载以使clientWidth检测并预测框的高度和宽度

 (function(){ const init = () => { const container = document.querySelector('.container') for(const i of Array(70).keys()){ const square = document.createElement('div') square.classList.add('square') var w = document.body.clientWidth; if (w > 800){ square.style.width = w / 385 + 'em'; square.style.height = w/ 395 + 'em'; square.style.margin =.3 + 'em'; } else { square.style.width = w / 475 + 'em'; square.style.height = w/ 485 + 'em'; square.style.margin =.2 + 'em'; } container.appendChild(square) } } init() }())

 *{ box-sizing: border-box; padding: 0; margin: 0; }.container { position: relative; max-height: 100vh; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }.square{ background-color: orange; perspective: 1000px; }

 <div class="container"></div>