映射样式的 JSX 输入元素的行为不符合预期答案

【问题标题】：Mapping styled JSX input elements is not behaving as expected映射样式的 JSX 输入元素的行为不符合预期
【发布时间】：2020-07-27 17:26:32
【问题描述】：

我有一个映射输入元素的组件，它有一个标志来确定它们是否应该是内联的。问题是我似乎无法让 flex 按预期工作。 justifyContent: 'space-between 不起作用，而且似乎没有响应。

我不确定我做错了什么。也许有更好/更清洁的方法来实现这一目标？

Codesandbox

【问题讨论】：

您的代码中没有space-between。您想要实现的布局是什么？
您的样式不适用于共同的父母，所以它不会工作......
我已经进行了编辑。我正在尝试将 inLine: true 内联的两个字段与空格对齐，或者寻找更好的方法。
您将要在 flex 容器上使用 space-between（即盒子的父级 - 而不是盒子本身）
我也试过了，比如<div style={{ display: 'flex' }} ><Form fields={field} /></div>，但这样它只是将所有字段映射到它自己的行中。我还想有条件地确定一个字段是否应该与另一个输入字段内联——不要将所有字段映射到自己的行中

标签： javascript css reactjs flexbox

【解决方案1】：

justify-content: space-between 将告诉 flex 容器 调整 flex 项，使它们之间有相同的空格。话虽如此，这个属性需要在父容器中。

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

至于包装，您将要使用flex-wrap 属性。 flex-wrap: wrap 告诉 flex 父级在无法再包含内容时包装 flex 项。 flex-basis 在此上下文中的行为类似于宽度（并将覆盖它）。你可以使用这个属性告诉flex parent这个带有100%flex-basis的容器应该占据整行；您可以在此处提供 inLine 元素 0%，以便 flex-grow 确定它的大小（即，指定相对于 flex 容器内的其他项目，应将 flex 容器中的剩余空间分配给该项目） .如果您绝对必须在内联字段之间有一个“空白”，请在内联元素上使用 margin 等属性。

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",
});

代码沙盒：https://codesandbox.io/s/determined-sammet-xp2on?file=/src/Form.js

【讨论】：