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

来源：2-6 Card 和 Button 组件

Forward215

2017-08-28

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%失效了？

写回答

2回答

接灰的电子产品

2017-08-28

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

接灰的电子产品

2017-08-28

.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;
}

Angular打造企业级协作平台，让你在Angular领域中出类拔萃

全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用

998 学习 · 536 问题

查看课程

相似问题

老师，我的md-card-title好像都没有生效

回答 2

md-input-container

回答 2

请问老师您是如何在输入md-card，自动变成<md-card></md-card>？

回答 1

'md-car-header' is not a known element该如何解决？

回答 1

请问导师我的 card 样式不垂直方向居中

回答 1

打开慕课网App查看更多内容