元素随着页面变宽而重新定位答案

【问题标题】：Elements Relocate as Page Gets Wider元素随着页面变宽而重新定位
【发布时间】：2019-08-23 04:12:06
【问题描述】：

我正在努力制作更易于访问的网页。我遇到了一个问题，当我使页面更宽时，元素似乎会重新定位到屏幕下方。我相信这是因为我根据未固定百分比设置了上边距。我不完全确定为什么随着屏幕变宽高度会增加。使用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>

我希望表单的高度在宽度增加时保持固定，但这不是我看到的结果。

【问题讨论】：

能否提供运行代码的链接？
beer-rating.herokuapp.com/#/home

标签： javascript css forms material-ui

【解决方案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,
  }
})

【讨论】：