页面变宽时元素重新定位

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>

我希望当表单宽度增加时，表单高度能保持不变，但实际并非如此。

- tdammon

---

你能提供正在运行的代码的链接吗？ - Andy Hoffman

https://beer-rating.herokuapp.com/#/home - tdammon

Answer 1

首先，flex-grow 是一个应该设置在 flex 子元素上的属性。当它添加到 .jss2 这个 flex 父元素上时没有任何作用，您可以将其删除。

为了使 .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,
  }
})

- Andy Hoffman