Question

我现在在角度和工作技能页面上进行投资，我在类别中列出了技能列表，每个类别都有自己的框，并且每个类别中进展和技能数量不同的技能很少。事实是，由于技能部分不是单独的组件，所以一切正常，因为盒子的高度是固定的，并且如果一个盒子的技能比行中另一个盒子的技能少，则添加空白空间以将行中的元素调整为具有相同的高度，现在我将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类现在嵌套在新的component元素内，因此它不再是.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;
}

flex中的角项目在成为组件后没有固定的高度

1 个答案: