css - 无法让 justifyContent 与 flexbox 和 material ui 一起工作

Question

我正在尝试将一些 jsx 返回到 material-ui 卡片组件的标题 Prop 。我希望这两个框出现时它们之间有空间。即一个在标题的左侧，一个在标题的右侧。

flexbox 按预期内联显示 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>

非常感谢任何帮助!

Answer 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>

或者给父级一个比2个盒子内容更宽的宽度

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>

或者在第2个框上添加边距

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>