How to align 3 divs inside another div with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.