600px容器放四个160px项目，为什么会换成两行

操作步骤

1. 打开Flex布局试验台，点击恢复四项目示例：容器600×240px，项目主轴尺寸160px，数量4，gap16px，row、wrap、flex-start、center。
2. 观察第一行项目1至3，第二行项目4。三个项目占160×3+16×2=512px，四个需要688px，因此无法全放在600px一行里。
3. 改为nowrap。项目保持160px、不收缩，第四项会溢出容器；在预览框内横向滚动查看，不要误认为工具自动缩小项目。
4. 恢复示例，将justify-content改为space-between。第一行剩余空间分给两个间隔，实际间隔变为60px；第二行只有一项，仍靠起点。gap是最小间距，不是最终总间隔。
5. 再把direction切为column，主轴尺寸160px改指项目高度。240px高容器每列只能容纳一个项目，wrap向横向形成多列。复制代码或下载CSS，将示例HTML配套使用。

跟着示例试一次

默认四项示例只用占位文本，不需要上传文件。三个项目占512px，剩余88px；flex-start时这88px留在行尾，space-between时两个间隔各增加44px，16+44=60px。

怎样确认结果正确

row+wrap默认前三项同一行，第四项在下一行；nowrap四项位于同一行且最后一项溢出。切换column后每项高度为160px。可在浏览器开发者工具检查display:flex、flex:0 0 160px以及gap:16px；导出的CSS与页面设置一致。

常见问题与边界

justify-content始终沿主轴，不能固定理解为水平居中。align-items控制每行交叉轴，align-content固定为flex-start。该工具没有flex-grow/shrink、order、响应式断点或真实内容测量，固定尺寸只用于试验；正式页面需自行调整容器宽高，避免窄屏溢出。下载仅含CSS，HTML需另复制；字体和外部样式会影响项目交叉轴大小。非法数字会隐藏预览和导出，先修正再复制。所有设置在浏览器计算，不上传或自动保存。