为何flex容器内项目总宽超100%时flex项目会自动换行？

布局换行的核心原因是盒模型宽度计算溢出：

• 默认盒模型为content-box，设置的flex-basis:16.666%仅对应内容区宽度，子项配置的padding:16px和border:1px solid black会额外占据宽度，6个子项的实际总宽度已经超过容器宽度
• 外层flex容器本身也设置了padding:16px，内部可容纳子项的实际宽度比容器总宽度小32px，进一步放大了宽度溢出问题，屏幕缩小时容器宽度变小，溢出的子项就会自动换行，破坏3×6的固定结构。

• 全局设置盒模型为border-box，让padding、border纳入元素设置的宽度计算范围内，不会额外撑大元素，在全局CSS中添加以下代码：

* {
  box-sizing: border-box;
}

• 调整flex子项的伸缩属性，固定每个子项占1/6容器宽度，禁止自动伸缩，将子项的flex属性设置为0 0 calc(100% / 6)即可，这个写法等价于flex-grow:0; flex-shrink:0; flex-basis:calc(100%/6)，能保证无论屏幕尺寸怎么变，每行永远刚好容纳6个子项。

import "./styles.css";
import React, { useState } from "react";

const gridValues = new Array(18).fill(0);

export default function App() {
  const [grid, setGrid] = useState<number[]>(gridValues);

  return (
    <div
      style={{
        width: "90%",
        height: "100%"
      }}
    >
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          padding: "16px"
        }}
      >
        {grid.map((num, i) => {
          return (
            <span
              key={i}
              style={{
                display: "flex",
                // 固定占1/6宽度，不随容器尺寸伸缩
                flex: "0 0 calc(100% / 6)",
                cursor: "pointer",
                justifyContent: "center",
                padding: "16px",
                border: "1px solid black"
              }}
            >
              <span style={{ opacity: 0 }}>{num}</span>
            </span>
          );
        })}
      </div>
    </div>
  );
}

注：如果后续需要给子项加间距，不要给子项加margin，直接给flex容器设置gap属性即可，不会打乱宽度计算逻辑。

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