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

I have an html of the sort :

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

The parent div is a single horizontal line of 100% width.

Now under different conditions maybe 3 children will be displayed, maybe 4 or maybe 5. I want the children to keep their sizes but according to the number of children being displayed, I want children to dynamically have space between them so as to occupy full width of the parent div.

Note: The structure is actually not this simple. Each child div may have a different size based on conditions so dynamic margin is what I am looking for. Each child div has a tree of it's own for purposes of angular usage so applying css to classes of children is not preferable.

What property can I apply to parent div so as to adjust the margin between children dynamically ? Please help.

EDIT I have tried flex module but as I said each child has it's own dom tree and hence may not be the immediate child of parent div. In such cases the child is squished to a small size and the "size" property is lost.

Solution

You can use this:

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