Javascript 映射样式的JSX输入元素的行为与预期不符

我有一个映射输入元素的组件，它有一个标志来确定它们是否应该内联。问题是我似乎无法让flex按预期工作。

justifyContent:“

之间的空格不起作用，而且似乎没有响应

我不确定我做错了什么。也许有更好/更干净的方法来实现这一点

---

调整内容：之间的空格

将告诉flex容器调整flex项，使它们之间的空格相同。话虽如此，该属性需要位于父容器中

<div style={flexContainer}>
  {fields.map(({ inLine }) => (
    ...
  ))}
</div>

---

CodeSandBox:

代码中的

之间没有空格。你想要达到什么样的布局？你的风格没有应用到普通的父级，所以它不起作用…我已经做了编辑。我正在尝试将
inLine:true
内联的两个字段与空格between对齐，或者寻找更好的方法。您将希望在flex容器上使用
空格between
（即框的父项，而不是框本身），我也尝试过，类似于
，但这样，它只是将所有字段映射到自己的行中。我还想有条件地确定一个字段是否应该与另一个输入字段内联——而不是将所有字段映射到它们自己的行中
const flexContainer = {
  display: "flex",
  flexWrap: "wrap",
  justifyContent: "space-between"
};

const style = inLine => ({
  display: inLine ? "inline-flex" : "flex",
  flexBasis: inLine ? "0" : "100%",
  flexGrow: inLine ? "1" : "0",
});