如何动态定位和调整div元素的大小？

debugcn 发表于 Dev

尤尔帕莱

我正在尝试有一个角度组件，它可以根据要显示的div元素动态地定位和调整div元素的大小。这是我到目前为止所取得的成就。

编辑：如果您签出我的stackblitz示例，我正在使用显示：flex（因此flexbox）。我遇到的问题是如何确保一行最多只有3个div，然后换行到下一行，并且div的长度始终是相同的？

。

编辑2：我的目标是，当有一个或两个div时，div的长度是容器长度的一半。这就是为什么我在下图中的顶部放置“标尺”。如果超过2个div，则div的长度应为容器长度的1/3。在包装到下一行之前，一行应由三个div填充。

以下是我要实现的目标的直观表示：

特定集中的所有div具有相同的宽度和高度。

我知道如何通过使用calc()width来破解，但是随后我将必须将divs变量的数量传递给我的css文件。我也知道在ngClass-Angular 4中使用多个条件是一个选项，但是如果我没有其他选择，我想使用它。

如何才能仅使用CSS来实现我想达到的目标（如果可能）？如果只能使用css，我很乐意接受其他建议。

亚历山大·贝鲁金（Aleksandr Belugin）

首先化妆flex用的容器

.container1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

第二次用于calc()指定项目宽度

.item {
  width: calc(33.33% - 0px);
}

第三指定第一和第二孩子的行为。他们应该成长，但是max-width: 50%

.item:first-child, .item:nth-child(2) {
  flex-grow: 1;
  max-width: 50%;
}

.container1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  outline: dashed red 1px;
  margin: 10px 0
}

.item {
  height: 100px;
  background-color: green;
  outline: 1px dashed blue;
  width: calc(33.33% - 0px);
}

.item:first-child, .item:nth-child(2) {
  flex-grow: 1;
  max-width: 50%;
}

<div class="container1">
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>