javascript - 元素随着页面变宽而重新定位

Question

我正在努力制作更易访问的网页。我遇到了一个问题，当我使页面变宽时，元素似乎在屏幕下方移动得更远。我相信这是因为我根据 % not fixed 设置了上限。我不完全确定为什么高度会随着屏幕变宽而增加。使用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,
  }
})