не может получить justifyContent для работы с flexbox и материалом ui

Question

Я пытаюсь вернуть некоторый jsx в заголовок элемента компонента материала-ui. Я бы хотел, чтобы эти две коробки появлялись с пространством между ними. то есть один на левой стороне и один на правой стороне заголовка.

В гибкой коробке отображаются вставки, как ожидается, но я не могу заставить их перемещаться по горизонтальной оси. Прикрепленное изображение представляет собой картину того, как выглядит атм. 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

Благодаря ответам помогли найти проблему, которая была два раза:

1) родительский div не был установлен на ширину 100%, чтобы переопределить встроенный стиль текстового компонента заголовка карты, используйте стиль стиля prop компонента заголовка карты, как описано на материальных Ui документы http://www.material-ui.com/#/components/card

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

2), как упоминалось в одном из ответов, также необходимо использовать гибкий вместо инлайн-Flex, как встроенные сгибают обвалов до размера содержащегося в нем.

Answer 2

Это может быть ширина верхнего div. Он не охватывает весь контейнер заголовка карты. Попробуйте установить 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 3

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>