Элементы перемещаются как страница становится шире

Question

Я работаю над созданием более доступных веб-страниц.Я сталкиваюсь с проблемой, когда, когда я делаю свою страницу шире, элементы, кажется, перемещаются дальше вниз по экрану.Я считаю, что это потому, что я устанавливаю верхнюю маржу на основе% не фиксированной.Я не совсем уверен, почему высота будет увеличиваться, поскольку экран становится шире.Установлены ли высота и ширина в фиксированном соотношении при использовании flexGrow?

Я использую material-ui с этими переопределениями стилей:

const styles = theme => ({
  root : {
    flexGrow: 1,
    height: '100%',
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'green'
},
  form: {
    backgroundColor: 'grey',
    width: '75%',
    display: 'flex',
    flexDirection: 'column',
    marginTop: '40%',
    marginBottom: '50%',
    padding: 20,
    paddingTop: 35,
    minHeight: 200,
  },

})

Вот элемент формы, с которым я работаю:

<div className={classes.root}>
    <form className={classes.form} onSubmit={this.login}>
       <Typography component="h2" variant="headline">Login</Typography>
    </form>
</div>

Я ожидаю, что высота формы останется неизменной при увеличении ширины, но это не тот результат, который я вижу.

Answer 1

Во-первых, flex-grow - это свойство, которое вы бы задали для дочернего элемента flex.Он ничего не делает при добавлении к родительскому элементу flex .jss2.Вы можете просто удалить его.

Чтобы .jss3 оставался вертикально отцентрированным, удалите следующее:

• margin-top: 40%;
• margin-bottom: 50%;

И добавить следующее к .jss2: align-items: center;

Не имея возможности проверить стили, перенесенные на JavaScript, я несколько уверен, что это будет работать:

const styles = theme => ({
  root : {
    height: '100%',
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'green',
    alignItems: 'center'
},
  form: {
    backgroundColor: 'grey',
    width: '75%',
    display: 'flex',
    flexDirection: 'column',
    padding: 20,
    paddingTop: 35,
    minHeight: 200,
  }
})