Дисплей flex не работает внутри Material UI Grid Item

Question

Я пытаюсь поместить элемент в конец элемента сетки (по горизонтали). Для этого я обертываю свой компонент следующим компонентом div:

Полный код:

<Grid container spacing={8} alignItems={'stretch'}>
  <Grid item xs={9} >
    ...other components
    <div style={{  display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
      <p>hello world</p>
    </div>
  </Grid>
</Grid>

Когда я использую компонент div вне Grid, элемент плавает справа от контейнера но не работает внутри Grid. Также обратите внимание, что эта таблица импортируется из пользовательского интерфейса материала. Любая помощь будет оценена. Спасибо.

Answer 1

Исходя из вашего вопроса, я думаю, что вы пытаетесь поместить «Hello World» к правому краю контейнера ... но вы поместили его в сетку с помощью xs={9} ... чтобы достичь этого, просто поместите свой «Hello World» внутри сетки с xs={12}

релевантным HTML:

<div className={classes.root}>
      <Grid container alignItems={"stretch"}>
        <Grid item xs={9}>
          ...other components
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
              alignItems: "flex-end"
            }}
          >
            <p>hello world</p>
          </div>
        </Grid>
        <Grid item xs={12}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
              alignItems: "flex-end",
              color: "red"
            }}
          >
            <p>I think you mean to do this... hello world</p>
          </div>
        </Grid>
      </Grid>
    </div>

работающим стекаблиц здесь