在 Ant Design 5 垂直表单中，可为特定 Checkbox 组（如多选项行）单独实现水平对齐布局，通过精准覆盖新增的 .ant-form-item-row 结构样式达成，无需全局改写或引入额外组件。
在 ant design 5 垂直表单中，可为特定 checkbox 组（如多选项行）单独实现水平对齐布局，通过精准覆盖新增的 `.ant-form-item-row` 结构样式达成，无需全局改写或引入额外组件。
Ant Design 5 对表单内部 DOM 结构进行了重构，移除了 v4 中部分隐式 Flex 布局逻辑，并在 <Form.Item> 内部新增了包裹层 .ant-form-item-row。这意味着：直接对 .ant-form-item 设置 flex-direction 已无效——样式作用链被中断，必须向下穿透至该新容器。
要使某一行复选框（例如“Available”和“ShipHome Only”）在整体垂直表单中保持水平排列，推荐采用以下 CSS 覆盖方案：
/* 仅作用于带 horizontal-override 类的 Form.Item 行 */
.horizontal-override > .ant-form-item {
margin-bottom: 0; /* 避免垂直间距干扰 */
}
.horizontal-override > .ant-form-item .ant-form-item-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
height: 32px !important;
}
.horizontal-override > .ant-form-item .ant-form-item-label {
margin-right: 8px !important;
padding: 0 !important;
}
.horizontal-override > .ant-form-item .ant-form-item-control-input {
min-height: auto !important;
}配合 JSX 使用方式如下（注意：<Divider type="vertical"/> 在水平布局中已不必要，建议移除或替换为 margin 控制间距）：
<Form layout="vertical">
{/* 其他垂直排列的 Form.Item */}
<Row className="horizontal-override">
<Form.Item name="Available" label="Available" valuePropName="checked">
<Checkbox onChange={onInputChange} />
</Form.Item>
{/* 推荐用空格或 margin 分隔，更可控 */}
<span style={{ margin: '0 12px' }}></span>
<Form.Item name="ShipHomeOnly" label="ShipHome Only" valuePropName="checked">
<Checkbox onChange={onInputChange} />
</Form.Item>
</Row>
{/* 后续继续其他垂直项 */}
</Form>⚠️ 关键注意事项：
- 避免滥用 !important：虽然答案中建议添加以确保优先级，但生产环境应优先通过 CSS-in-JS（如 className + useStyle）、CSS Modules 或更高特异性选择器（如 [data-ant-version="5"] .horizontal-override ...）替代，提升可维护性；
- 响应式兼容：若需在小屏下自动转为垂直堆叠，可结合 @media (max-width: 768px) 重置 .ant-form-item-row 为 flex-direction: column；
- 更优替代方案：对于纯多选场景，强烈推荐改用 <Checkbox.Group /> 配合 style={{ display: 'flex', flexDirection: 'row', gap: '12px' }}，语义更清晰、结构更轻量，且天然规避 Form.Item 布局嵌套问题；
- 无障碍考量：水平排列时确保标签与控件的视觉/逻辑关联明确，必要时为每个 <Checkbox> 显式设置 aria-labelledby 或使用 <label> 包裹。
综上，Ant Design 5 并未提供原生的“混合布局” API，但通过理解其 v5 的 DOM 结构演进（尤其是 .ant-form-item-row 的引入），即可用轻量、精准的 CSS 覆盖实现高度定制化布局，兼顾一致性与灵活性。
