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子代上设置的属性。将其添加到弹性父级.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,
  }
})

随着页面变大，元素重定位

1 个答案: