Почему не должно быть flexDirection: 'column' pu sh пробел между ними? - PullRequest
Новая
       154

Почему не должно быть flexDirection: 'column' pu sh пробел между ними?

0 голосов
/ 29 мая 2020

У меня есть: 

        <Grid item xs={12} md={6} className={classes.heroGrid}>
          <Typography variant='h3' >
Some stuff
          </Typography>
          <div style={{ display: 'flex' }}>
            here
          </div>

        </Grid>

И heroGrid: 

    heroGrid: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignContent: 'space-between',
      alignItems: 'space-between'
    }

Но это не sh мой контент для разделения.

1 Ответ

1 голос
/ 29 мая 2020

Высота компонента верхнего уровня <Grid>, вероятно, рассчитывается как точная высота элементов, которые он содержит.

Итак, он выталкивает все лишнее пространство между двумя элементами - это просто так происходит 0 пикселей дополнительного пространства!

Вы можете временно протестировать это, установив фиксированную высоту для элемента <Grid> с чем-то вроде: 

<Grid item xs={12} md={6} className={classes.heroGrid} style={{height: 500}}>

Если ваши элементы затем выталкиваются Затем вам нужно определить, как вы хотите установить высоту элемента Grid. Если он должен заполнить родительский элемент, вы можете сделать высоту 100%. Если это должна быть фиксированная высота, вы можете установить ее на определенную c фиксированную высоту.

...