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

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

组件

我在用自定义的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 收藏

反馈

2 条解答

UX智慧 Lv1

你这问题我太熟悉了，当年我也栽过坑里。问题不在 Row 组件，而在子元素的 flex 写法上。

你写的是 flex: '1'，这在 React Native 里没问题，但在浏览器里根本没效果！因为浏览器里的 flex 是个简写属性，它其实等价于 flex-grow flex-shrink flex-basis，而你只给了一个数字，浏览器会把它当 flex-grow 处理，但 flex-basis 默认是 auto，这就导致子项的实际宽度受内容影响，而不是强制均分。

你得把 flex 写完整，或者直接加个 flexBasis: '0%'，这样浏览器才知道「先留出零宽度，再按比例分配剩余空间」。

改法很简单，把子元素的 style 改成这样：

style={{ flex: '1 1 0%' }}

或者更明确点：

style={{ flex: '1', flexBasis: '0%' }}

这样三个子项就能稳稳均分了。

顺带说一句，你用 gap 和 justifyContent: 'space-between' 其实有点冲突。如果只是想等宽分布，去掉 justifyContent 也行，因为三个 flex: 1 1 0% 就能撑满整行，gap 会自动把间距分摊开。

不过你要是真想用 space-between，那得保证子项数量固定，否则最后一行会偏。这个得看实际需求。

我见过太多人卡在这一步，以为是 Row 的问题，其实只是 flex 的老坑……

2026-02-24 18:01

诸葛筱萌 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