如何用Flexbox实现卡片容器换行且不影响内部元素布局

要替换inline-block+word-spacing的hack方案，只需调整Flex容器和子元素的几个关键属性即可实现需求：

核心修改点 #

• 给Flex容器添加flex-wrap: wrap，让卡片在容器宽度不足时自动换行
• 给卡片（fieldset）设置flex-shrink: 0，防止卡片被挤压变形，确保内部内容有足够空间
• 给卡片内部的文本容器设置white-space: nowrap，强制文本和inline元素不换行
• 用gap属性控制卡片间的间距，替代手动margin设置更简洁

修改后的完整代码 #

<html><head>
<title>Nuggets</title>
<style>
body { padding: 0; margin: 10px; font-family: Arial, sans; font-size: 12pt; }
label { font-weight: 600; color: #448}
p { margin: 0 }
fieldset { border-radius: 4px; border: 1px solid #ddd; background-color: #fffff8; }
legend { color: #446; font-size: 8pt; margin-right: 5px }

div.fields { border: 1px solid #000044; background-color: #f8f8ff; padding: 10px; margin-bottom: 10px; margin-top: 10px; 
    word-spacing : -5px}
div.fields>* { word-spacing : 0 }
div.fields>fieldset { border-color: #88a; margin-top: 2px; padding: 2px 0 0 7px; min-height: 43px; vertical-align: top; display: inline-block; }
div.fields>fieldset>div { font-size: 9pt; padding-bottom: 4px; padding-right: 7px; display: inline-block; border: 1px solid green; white-space: nowrap; }

div.fields2 { border: 1px solid #000044; background-color: #f8f8ff; padding: 10px; margin-bottom: 10px; margin-top: 10px; 
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
div.fields2>fieldset { border-color: #88a; margin-top: 2px; padding: 2px 0 0 7px; min-height: 43px; flex-shrink: 0; }
div.fields2>fieldset>div { font-size: 9pt; padding-bottom: 4px; padding-right: 7px; display: inline-block; border: 1px solid red; white-space: nowrap; }
</style>
</head>
<body>
<div class="fields" id="card_0"><p>Using inline-block</p>
    <fieldset><legend>Rigid Content</legend>
        <div><label>Label</label><div>Non-word-wrapping Values</div></div>
        <div><label>Label</label><div>Value</div></div>
    </fieldset>
    <fieldset><legend>Rigid Content</legend>
        <div><label>Label</label><div>Non-word-wrapping Values</div></div>
        <div><label>Label</label><div>Value</div></div>
    </fieldset>
    <fieldset><legend>Rigid Content</legend>
        <div><label>Label</label><div>Non-word-wrapping Values</div></div>
        <div><label>Label</label><div>Value</div></div>
    </fieldset>
</div>

<div class="fields2" id="card_1"><p>Using flex</p>
    <fieldset><legend>Rigid Content</legend>
        <div><label>Label</label><div>Non-word-wrapping Values</div></div>
        <div><label>Label</label><div>Value</div></div>
    </fieldset>
    <fieldset><legend>Rigid Content</legend>
        <div><label>Label</label><div>Non-word-wrapping Values</div></div>
        <div><label>Label</label><div>Value</div></div>
    </fieldset>
    <fieldset><legend>Rigid Content</legend>
        <div><label>Label</label><div>Non-word-wrapping Values</div></div>
        <div><label>Label</label><div>Value</div></div>
    </fieldset>
</div>
</body></html>

效果说明 #

修改后，Flex版本的卡片会和inline-block版本表现完全一致：

• 容器宽度足够时，卡片横向排列
• 容器宽度不足时，卡片自动换行
• 卡片内部的文本和inline元素始终保持不换行

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