动态 space 分开 children div 占据 parent 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>

parent div 是一条 100% 宽度的水平线。

现在在不同的条件下可能会显示 3 children，可能是 4 或者可能是 5。我希望 children 保持它们的大小但是根据显示的 children 的数量，我希望 children 在它们之间动态地具有 space 以便占据 parent div.

的整个宽度

注：结构其实没有这么简单。根据条件，每个 child div 可能具有不同的大小，因此我正在寻找动态边距。每个 child div 都有自己的树用于 angular 用途，因此将 css 应用于 children 的类是不可取的。

什么属性可以应用到parent div 来动态调整children 之间的边距？请帮忙。

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

Answer 1

看看这个代码笔https://codepen.io/anon/pen/dJJzGZ

.parent {
  display: flex;
  flex-direction: row;
  width: 500px;
  justify-content: space-evenly;
}

你只需要使用 flex

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#justify-content

您的 IE11 存在一些小错误，但总体上运行良好

https://caniuse.com/#search=flex

Answer 2

你可以使用这个：

  .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
}

动态 space 分开 children div 占据 parent div 的整个宽度

Dynamically space apart children div to occupy full width of parent div

html

css

dynamic

fluid-layout