无法让 justifyContent 与 flexbox 和材质 ui 一起使用答案

【问题标题】：can't get justifyContent to work with flexbox and material ui无法让 justifyContent 与 flexbox 和材质 ui 一起使用
【发布时间】：2017-02-13 16:00:35
【问题描述】：

我正在尝试将一些 jsx 返回到 material-ui 卡片组件的 title 属性。我希望两个框之间出现空格。即一个在左侧，一个在标题的右侧。

弹性框按预期内联显示 div，但我无法让它们跨水平轴移动。附件是atm的样子。screenshot

renderCardTitle() {
    return (
      <div style={{ display: 'inline-flex', justifyContent: 'space-between' }}>
            <div>
                first box
            </div>
            <div style={{ alignSelf: 'flex-end' }}>
                second box
            </div>
        </div>
    );
  }

有问题的卡片组件的代码是：

 <Card style={styles.cardStyles}>
      <CardHeader
      title={this.renderCardTitle()}
      actAsExpander
      showExpandableButton
      />
      <CardText expandable>
        details about the quiz
      </CardText>
     </Card>

非常感谢任何帮助！

【问题讨论】：

你能在你的 div 上应用一个 width: 100% 吗？
使用 textStyle 属性为父级添加了 100% 的宽度。然后从 inline-flex 更改为 flex。感谢您的帮助

标签： css flexbox material-ui

【解决方案1】：

display: inline-flex 会将其父级折叠到内容大小，因此justify-content 将不起作用，因此请改用display: flex

body > div {
  padding: 5px;
}
div {
  border: 1px solid gray;
}

<div style="display: flex; justify-content: space-between">
  <div>
    first box
  </div>
  <div>
    second box
  </div>
</div>

或者给父母一个比两个盒子内容更宽的宽度

body > div {
  width: 50%;
  padding: 5px;
}
div {
  border: 1px solid gray;
}

<div style="display: inline-flex; justify-content: space-between">
  <div>
    first box
  </div>
  <div>
    second box
  </div>
</div>

或者在第二个框上加一个边距

body > div {
  padding: 5px;
}
div {
  border: 1px solid gray;
}

<div style="display: inline-flex;">
  <div>
    first box
  </div>
  <div style="margin-left: 20px;">
    second box
  </div>
</div>

【讨论】：

谢谢！有一系列问题。首先，正如您所说的 inline-flex 正在折叠到内容的大小（改为 flex ）。此外，父 div 不是 100% 宽度。我过度使用 CardHeader 的 textStyle 属性，并将宽度设置为 100%。
现在效果如何？您是否稍微编辑您的答案以包含问题的细节，我将其标记为答案？还是我根据你的写一个模态答案？
@LuckyLukas 首先，由于我的回答解决了主要问题，我没有看到更新的重点，其次，问题中甚至没有提到任何父级（没有 100% 宽度），并且不影响 justify-content 属性，.. 因此，我不明白为什么当我已经回答了主要的原始问题时，您应该发布自己的答案
恐怕它没有解决主要问题。更改为 flex 后，它并没有改变页面的外观，因为它的父级不是 100%，需要通过材质 ui 特定的道具。所以我想我会把这些信息提供给任何有同样问题的人。但你可能应该刚刚发表评论。我是新人，不知道。感谢您的帮助。
@LuckyLukas 你没看懂我的意思。你问为什么justifyContent 不起作用，我解释并展示了这一点，因此我的回答解决了你的问题。 ....现在您还说您的布局在更改为 display: flex 之前看起来并不像它所做的那样，尽管这是一个完全不同的问题，甚至在您的原始问题中都没有提到，并且与 @987654332 的方式无关@ 工作，但即便如此，在我的第二个示例中，我提到给父母一个宽度可能是一个解决方案，所以基本上我也涵盖了这一点，所以基于上述一个不发布自我答案，一个接受另一个

【解决方案2】：

它可能是顶部 div 的宽度。它没有跨越整个 Card Header 容器。尝试设置width:'100%'。

renderCardTitle() {
return (
  <div style={{ width:'100%' display: 'inline-flex', justifyContent: 'space-between' }}>
        <div>
            first box
        </div>
        <div style={{ alignSelf: 'flex-end' }}>
            second box
        </div>
    </div>
);
}

【讨论】：

【解决方案3】：

感谢给出的答案帮助找到了一个有两个问题的问题：

1) 父 div 未设置为 100% 宽度，要覆盖卡片标题文本组件的内联样式，请使用卡片标题组件的文本样式属性，如材料 ui 文档 http://www.material-ui.com/#/components/card 中所述

      <CardHeader
      title={this.renderCardTitle()}
      actAsExpander
      showExpandableButton
      textStyle={{ width: '100%' }}
      />

2) 如其中一个答案所述，还需要使用 flex 而不是 inline-flex，因为 inline flex 会折叠到它包含的内容的大小。

【讨论】：