Sometimes, we want to add a fluid container with equally spaced DIVs with CSS.
In this article, we’ll look at how to add a fluid container with equally spaced DIVs with CSS.
How to add a fluid container with equally spaced DIVs with CSS?
To add a fluid container with equally spaced DIVs with CSS, we use flexbox.
For instance, we write
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
to add nested divs.
Then we write
#container {
display: flex;
justify-content: space-between;
}
to make the outer div a flex container with display: flex;.
And we use justify-content: space-between; to spread the inner divs throughout the container’s width.
Conclusion
To add a fluid container with equally spaced DIVs with CSS, we use flexbox.
