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>