为什么我的Row组件里的子元素无法均匀分布？

程序猿小敏提问于 2026-02-15 17:33:25 阅读 10

组件

我在用自定义的Row组件布局时，想让三个子元素在一行里均匀分布，但不管怎么调整flex属性都挤在一起。

代码写成这样：


function Row({ children }) {
  return (
    <div style={{
      display: 'flex',
      gap: '20px',
      justifyContent: 'space-between'
    }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <Row>
      <div style={{ flex: '1' }}>A</div>
      <div style={{ flex: '1' }}>B</div>
      <div style={{ flex: '1' }}>C</div>
    </Row>
  );
}

预期应该是三个框等宽排列，但实际显示时右边总留有很大空白，flex:1好像没生效。试过把gap改成margin也不行，是不是Row组件的样式设置有问题？

Row行布局组件

我来解答赞 5 收藏

反馈

1 条解答

诸葛筱萌 Lv1

问题出在 justifyContent: 'space-between' 上，换成 justifyContent: 'space-around' 或直接去掉就行了。子元素已经设置了 flex: 1，它们会自动均分宽度，space-between 会让首尾元素贴边，导致右边空白异常。

代码调整如下：

function Row({ children }) {

  return (

    <div style={{

      display: 'flex',

      gap: '20px'

    }}>

      {children}

    </div>

  );

}

2026-02-16 09:01