Smart / liquid inline spacing of divs - html

Question

I have a container, with two containers inside of it.
<div id="container">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3...4...">
</div>
</div>
I want the main container to span the entire width of the page. (Width: 100%;)
I want the two child containers to evenly spread and fill the horizontal space on the page.
I want to be able to add say a third or even forth child container and have them all fill from 50% 50% to ~33% ~33% ~33% to 25% 25% 25% 25% and so on...
If there a way to do this easily? Sorry if I didn't explain this well, it is my first time asking a question.

Answer 1

Simply use flex by specifying display:flex on the container and then flex:1 (or flex-grow:1 on the child elements like this :
.container {
display: flex;
}
.container .box {
flex: 1; /*or also `flex-grow:1` */
min-height: 100px;
border: 1px solid red;
}
<!-- container with 2 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 3 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 4 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Refering to the documentation :
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up. The flex grow factor of a flex item is relative
to the size of the other children in the flex-container.
You can read more about flex property and flex-grow property