flexDirection无法正常工作

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是儿童元素的属性。

Answer 2

您需要flexDirection: row水平放置。