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

如何在布局中始终平均分配剩余空间给间隙（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在线预览