Sometimes, we want to align div elements side by side with CSS.
In this article, we’ll look at how to align div elements side by side with CSS.
How to align div elements side by side with CSS?
To align div elements side by side with CSS, we use flexbox.
For instance, we write
<div class="parent flex-parent">
<div class="child flex-child">A</div>
<div class="child flex-child">B</div>
</div>
to add nested divs.
Then we write
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
to add make the parent div a flex container with display: flex;.
Then we the child divs fill the container with flex: 1;.
Conclusion
To align div elements side by side with CSS, we use flexbox.
