Flexbox如何根据子元素总数量动态设置子项等宽

推荐方案：无需计算子元素数量，直接平分宽度 #

这是兼容性最好、实现最简单的方案，适配任意数量的子元素：

.container {
  display: flex;
  /* 可选：设置子元素间距，不会破坏平分效果 */
  gap: 8px;
}

.child {
  /* 核心配置 */
  flex: 1;
  /* 可选：防止子元素内部内容过长撑宽元素，导致宽度不一致 */
  min-width: 0;
}

实现原理 #

flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%：

• flex-basis: 0% 会将所有子元素的基础宽度统一设为0
• 相同的flex-grow取值会让所有子元素平分容器的剩余宽度，最终所有子元素宽度完全相等，不需要提前获知子元素总数。

备选方案：必须使用flex: 0 0固定宽度的场景 #

如果你有特殊需求必须禁止子元素伸缩，用flex-basis固定宽度，可以通过CSS选择器匹配子元素数量实现，适配数量可根据业务场景调整上限：

.container {
  display: flex;
}

/* 匹配1个子元素的场景 */
.child:first-child:nth-last-child(1) {
  flex: 0 0 100%;
}
/* 匹配2个子元素的场景 */
.child:first-child:nth-last-child(2),
.child:first-child:nth-last-child(2) ~ .child {
  flex: 0 0 50%;
}
/* 匹配3个子元素的场景 */
.child:first-child:nth-last-child(3),
.child:first-child:nth-last-child(3) ~ .child {
  flex: 0 0 33.333%;
}
/* 可继续补充对应你业务最大可能子元素数量的规则 */

实现原理 #

first-child:nth-last-child(n) 选择器只会在容器总共有n个子元素时命中，再配合兄弟选择器给所有子元素设置对应占比的宽度。

React动态方案（可选） #

如果子元素数量波动范围极大，不想编写大量CSS规则，可以在React层动态获取子元素数量注入CSS变量：

import { useRef, useEffect, useState } from 'react';

const FlexContainer = ({ children }) => {
  const containerRef = useRef(null);
  const [childCount, setChildCount] = useState(0);

  useEffect(() => {
    if (containerRef.current) {
      setChildCount(containerRef.current.children.length);
    }
  }, [children]);

  return (
    <div
      ref={containerRef}
      className="container"
      style={{ '--child-count': childCount }}
    >
      {children}
    </div>
  );
};

对应CSS：

.child {
  flex: 0 0 calc(100% / var(--child-count));
}

内容的提问来源于stack exchange，提问作者sleepydrmike