javascript-随着页面变大,元素重定位

我正在制作更易于访问的网页.我遇到了一个问题,当我扩大页面的范围时,元素似乎在屏幕下方重新定位.我相信这是因为我基于不固定的百分比设置了较高的边距.我不太确定为什么随着屏幕的变宽,高度会增加.使用flexGrow时,高度和宽度是否设置为固定比例？

我使用具有这些样式替代的material-ui：

const styles = theme => ({
  root : {
    flexGrow: 1,height: '100%',width: '100%',display: 'flex',justifyContent: 'center',backgroundColor: 'green'
},form: {
    backgroundColor: 'grey',width: '75%',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>

我希望表单的高度在宽度增加时保持不变,但这不是我看到的结果.

最佳答案

首先,flex-grow是您要在flex子代上设置的属性.添加到flex父.jss2后,它什么也不做.您实际上可以删除它.

为了使.jss3保持垂直居中,请删除以下内容：

>利润率最高：40％；
>底边距：50％;

并将以下内容添加到.jss2中：align-items：center;

在无法测试移植到JavaScript的样式的情况下,我有一定的信心：

const styles = theme => ({
  root : {
    height: '100%',backgroundColor: 'green',alignItems: 'center'
},}
})

javascript-随着页面变大,元素重定位

相关文章