登录界面md-card的flex布局的居中失效

Question

login.component.scss

form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; // 这个没效果
  //height: 720px;
}

md-card {
  height: 25em;
  flex: 0 0 20em;
}

.text-right {
  margin: 10px;
  text-align: end;
}

我按F12看了下

外层的form组件没有占满100%的空间 form 大小被 md-card 撑大，cross axis 无剩余空间，看上去像 center 失效了。为什么 form 的 height: 100%失效了？ 

Answer 1

接灰的电子产品 2017-08-28 11:20:09

有时间加下学习 Q 群吧，那里人多。看其他问答里面就有如何加 Q 群

Answer 2

接灰的电子产品 2017-08-28 11:18:23

.form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.card {
flex: 0 1 20rem;
}

.text-right {
margin: 10px;
text-align: end;
}

:host {
display: flex;
}