How to align div elements side by side with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.