Sometimes, we want to align 3 divs inside another div with CSS.
In this article, we’ll look at how to align 3 divs inside another div with CSS.
How to align 3 divs inside another div with CSS?
To align 3 divs inside another div with CSS, we use flexbox.
For instance, we write
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
to add nested divs.
Then we write
#container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
to make the outer div a flex container with display: flex;.
We set the flex direction to row with flex-direction: row;.
We disable wrapping with flex-wrap: nowrap;.
And we spread the innter divs throughout the outer div with justify-content: space-between;.
Conclusion
To align 3 divs inside another div with CSS, we use flexbox.
