使用Ant Design React UI库，flex类型Row的flex属性未生效问题求助

看起来你遇到的核心问题有两个：CSS选择器错误导致Row没有获得预期的宽度，以及Col的布局规则没匹配你的需求。咱们一步步来修复：

1. 修正CSS选择器 #

你写的.ant-row .homepage-row是后代选择器，它会选择ant-row类元素内部的homepage-row元素，但你的Row组件同时拥有ant-row和homepage-row两个类，所以应该用多类选择器（类名之间无空格）：

.ant-row.homepage-row {
  width: 100%;
}

这个修改能确保你的Row真正拿到100%宽度，flex布局才有足够空间发挥作用。

2. 调整Col的布局配置 #

Ant Design的Col在type="flex"的Row中，默认遵循flex布局规则，但你当前设置的span={6}三个加起来只有18（总栅格是24），会留下6份空白空间。根据需求，有两种优化方式：

方式一：用flex属性让Col均分空间 #

如果希望三个Col自动填满Row宽度，直接给Col添加flex="1"属性（可代替或配合span）：

<Content className="site-layout-background">
  <Row gutter={16} className="homepage-row" type="flex" align="middle">
    <Col className="gutter-row" flex="1">
      <div style={style}>col</div>
    </Col>
    <Col className="gutter-row" flex="1">
      <div style={style}>col</div>
    </Col>
    <Col className="gutter-row" flex="1">
      <div style={style}>col</div>
    </Col>
  </Row>
</Content>

flex="1"会让每个Col等分剩余空间，完美适配flex布局。

方式二：调整span总和为24 #

如果你想保留栅格系统的span属性，把每个Col的span改成8（3×8=24），刚好填满整个Row：

<Content className="site-layout-background">
  <Row gutter={16} className="homepage-row" type="flex" align="middle">
    <Col className="gutter-row" span={8}>
      <div style={style}>col-8</div>
    </Col>
    <Col className="gutter-row" span={8}>
      <div style={style}>col-8</div>
    </Col>
    <Col className="gutter-row" span={8}>
      <div style={style}>col-8</div>
    </Col>
  </Row>
</Content>

额外检查点 #

如果调整后还是有问题，看看你定义的style变量里有没有设置固定宽度、多余的margin/padding，这些可能会干扰flex布局的正常排列。

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