Question

我正在尝试为我的团队创建“卡片”。但是，外观很奇怪，因为尺寸不同。我的设置如下：

  {
    path: 'category', component: CategoriesComponent,
    children: [
      {
        path: '**',
        component: CategoriesComponent
      }
    ]
  }

我的CSS现在看起来像这样：

<div class="card-wrapper">
<div class="card">Card1</div>
<div class="card">Card2</div>
</div>

我似乎找不到一种使所有卡的高度都相同的方法。我在这里在stackoverflow上看到应该这样做：

.card-wrapper
{
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card
{
width: 30rem;
background: #000;
align-items: center;
justify-content: center;
}

但这似乎不起作用。有什么建议？这是当前外观的图片： CARDS NOW

Answer 1

我认为是因为您使用

align-items：居中

只需移除它，这两张卡的高度应该相同

https://stackblitz.com/edit/typescript-sevm5b

Answer 2

设置弹性基础将很有帮助。而且，您不需要为此的align-items和align-content。

* { box-sizing: border-box; }

.container { 
  display: flex; 
  flex-flow: row wrap;
  justify-content: space-between;
  height:20vh
}


.card {
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  flex: 0 1 33.33%;
  padding: 15px; /* gutter width */
}

<div class="container">
  <div class="card"><br></div>
  <div class="card"><br></div>
  <div class="card"><br><br><br><br><br></div>
</div>

即使内容不同，如何使div内的元素的高度和宽度相同？

2 个答案: