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

【问题标题】：How do dynamically position and size div elements?如何动态定位和调整 div 元素的大小？
【发布时间】：2020-02-07 06:47:39
【问题描述】：

我正在尝试使用一个角度组件，该组件可以根据要显示的 div 元素的数量动态定位和调整 div 元素的大小。 This is what I have achieved so far。

编辑：如果您查看我的 stackblitz 示例，我正在使用 display: flex （因此是弹性盒）。我遇到的问题是如何确保 row 最多只有 3 个 div，然后换行到下一行 div 的长度总是一样的吗？

编辑 2：我的目标是当有一两个 div 的长度 div 是容器的一半。这就是为什么我把“尺子”放在下图中的顶部。如果有超过 2 个 div 的长度的 div 应该是容器长度的 1/3。还有一排在换行到下一行之前应该填充三个 div。

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

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

我知道如何通过在宽度上使用calc() 来解决问题，但是我必须将 div 变量的数量传递给我的 css 文件。我也知道使用Multiple conditions in ngClass - Angular 4 是一个选项，但如果我没有任何其他选项，我想使用它。

我怎样才能实现我想要仅通过 css 实现的目标（如果可能）？如果不能只使用 css，我很乐意接受任何其他建议。

【问题讨论】：

你有没有考虑过使用像 bootstrap 这样的风格包？还是使用 display: flex ？还是使用指令而不是完整的组件？
我在stackblitz中的当前示例我正在使用display: flex。
当然，使用 flexbox：css-tricks.com/snippets/css/a-guide-to-flexbox
@DaneBrouwer 我目前的实现是静态的而不是动态的。如果我将 div 元素减少到一个，它将无法按我的意愿工作。从我所看到的来看，我认为我将不得不在多个条件下使用 ng-class。我的问题不是 flexbox 不工作，而是。我的问题是我试图让它动态化。
@YulePale Found a link that might be useful

标签： html css angular

【解决方案1】：

首先用

制作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>

【讨论】：

【解决方案2】：

Checkout sample working copy检查 flex 我猜会解决上述问题。

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

.option-box{
  width:40%;
  border: 1px blue solid;
  margin: 3px
}
@media screen and (max-width: 600px) and (min-width: 301px) {
  .option-box {
    width:30%;
  }
}
@media screen and (max-width: 300px) {
  .option-box {
    width:100%;
  }
}

【讨论】：