css - flex 方向不工作

Question

我尽力了。但它不起作用。我想使用 flexbox 使我的元素内联，代码如下:

<div style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }}>
    <div style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </div>

我所做的一切，它只按列呈现。有人能救我一命吗？

Answer 1

如果你想让它们内联，你应该使用row而不是column:

<div 
  style={{
    display: 'flex',
    flexFlow: "row nowrap",
    justifyContent: 'center',
  }}
>
    <div style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</div>

flex 是子元素的属性。