# 前端-如何始终平均分配剩余空间

### 如何在布局中始终平均分配剩余空间给间隙（gap）

``````import { useEffect } from "react";
import "./styles.css";

export default function App() {
function dynamicCalculate() {
const container = document.getElementById("container") as HTMLElement;
const item = container.firstElementChild as HTMLElement;

let W: number; // Width of container.
let w: number; // Width of item.
let b: number; // Border's width of item.
let minGap: number; // Minimum gap between items.
let gap: number; // Gap between items.
let n: number; // Number of items in one row.

W = container.clientWidth;
w = item.clientWidth;
b = +window.getComputedStyle(item).borderWidth.replace("px", "") * 2;
w = w + b;
minGap = 16;
n = Math.floor(W / w);

function calc(n: number): [number, number] {
gap = (W - n * w) / (n + 1);
if (gap < minGap) {
n--;
gap = (W - n * w) / (n + 1);
return calc(n);
}
return [n, gap];
}
[n, gap] = calc(n);
console.log(`Put \${n} items in one row, gap is \${gap}px.`);
const halfGap = gap / 2;
for (let item of container.children) {
(item as HTMLElement).style.marginLeft = `\${halfGap}px`;
(item as HTMLElement).style.marginRight = `\${halfGap}px`;
}
}

useEffect(() => {
dynamicCalculate();
return () => {
window.removeEventListener("resize", dynamicCalculate);
};
}, []);

return (

Hello CodeSandbox
Start editing to see some magic happen!
{/* demo */}

{Array.from({ length: 20 }).map((v, i) => {
return (

Item-{i}

);
})}

);
}``````

codesandbox地址demo在线预览