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

如何在布局中始终平均分配剩余空间给间隙（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; container.style.paddingLeft = `${halfGap}px`; container.style.paddingRight = `${halfGap}px`; for (let item of container.children) { (item as HTMLElement).style.marginLeft = `${halfGap}px`; (item as HTMLElement).style.marginRight = `${halfGap}px`; } }useEffect(() => { dynamicCalculate(); window.addEventListener("resize", 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在线预览