html - 动态分隔子 div 以占据父 div 的整个宽度

Question

我有这样的 html:

<div class="parent">
  <div class="child size3"></div>
  <div class="child size2"></div>
  <div class="child size2"></div>
  <div class="child size2"></div>
  <div class="child size1"></div>
</div>

父级 div 是一条宽度为 100% 的水平线。

现在在不同的条件下可能会显示 3 个 child ，可能是 4 个或可能是 5 个。我希望 children 保持自己的大小，但根据显示的 child 数量，我希望 children 在他们之间动态地留出空间以占据整个宽度父 div 的。

注意:结构其实没有这么简单。根据条件，每个子 div 可能具有不同的大小，因此我正在寻找动态边距。为了 Angular 使用的目的，每个子 div 都有自己的树，因此将 css 应用于子类是不可取的。

我可以对父div 应用什么属性来动态调整子元素之间的边距？请帮忙。

编辑我已经尝试过 flex 模块，但正如我所说，每个 child 都有自己的 dom 树，因此可能不是父 div 的直接 child 。在这种情况下， child 被挤压成一个小尺寸，并且“尺寸”属性丢失。

Answer 1

你可以使用这个:

  .parent 
{
  display: -moz-flex; //for browser compatibilty
	display: -ms-flexbox; //for browser compatibilty
	display: -webkit-flex; //for browser compatibilty
	display: flex;
  flex-direction: row; //Use browser prefix for this
  width: 500px;
  justify-content: space-evenly; //use browswer prefix
}