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

Question

我正在尝试 return 一些 jsx 到 material-ui 卡片组件的标题道具。我希望这两个框在它们之间出现 space。即 header.

的左侧和右侧一个

弹性框按预期内联显示 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

它可能是顶部 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>
);
}

Answer 2

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:nd 框上添加边距

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>

Answer 3

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

1) parent div 未设置为宽度 100%，要覆盖卡片标题文本组件的内联样式，请使用卡片的文本样式道具 header组件，如 material ui 文档 http://www.material-ui.com/#/components/card

中所述

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

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

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

can't get justifyContent to work with flexbox and material ui

css

flexbox

material-ui