css - flex 中的 Angular 元素在成为组件后没有固定的高度

Question

我正在以 Angular 制作我的作品集并做技能页面，我有按类别分组的技能列表，每个类别都有自己的框，并且每个类别的进步和技能数量不同的技能很少。问题是，由于技能部分不是单独的组件，所以一切都很好，因为盒子的高度是固定的，如果一个盒子的技能少于行中另一个的技能，则添加空白空间以将行中的元素调整为具有相同的高度，现在当我将 div 变成组件，行中的所有元素(组件)根据其内容具有不同的高度。

之前的技能页面:

<div class="flex-container">
   <div class="skill-section">
      <h3> Skill title</h3>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
   </div>
   <div class="skill-section">
      <h3> Skill title</h3>
      <app-skill-progress></app-skill-progress>
      <app-skill-progress></app-skill-progress>
   </div>
</div>

之后的技能页面:

<div class="flex-container">
   <app-skill-section></app-skill-section> // has 3 skills inside
   <app-skill-section></app-skill-section> // has 2 skills inside
</div>

这里是类的样式:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.skill-section {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
}

Answer 1

.skill-section 类现在嵌套在新组件元素中，因此它不再是 .flex-container 的直接子元素。我建议将选择器从 .skill-section 类更改为 app-skill-section 元素并添加 display: block。

像这样:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
app-skill-section {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
  display: block;
}

或者，您可以将这些样式直接应用到新组件的 CSS 中的 :host 元素:

:host {
  width: 560px;
  margin-bottom: 35px;
  margin-right: 30px;
  border-radius: 8px;
  padding: 24px 16px;
  background-color: #fff;
  box-shadow: 0px 5px 20px -1px rgba(0, 0, 0, 0.55);
  position: relative;
  display: block;
}