Post On : January 23, 2020

Hi friends;

Let me show you how we can use flex-grow and how it actually works.

Flex-grow will help to see how much element can grow with respect to other elements in same container and container size.

It will simply fits all elements within container in full size without leaving space on their sides.

This can also help you to create a spacer in between 2 elements to show 1 element in very left and other to very right. How? Please check the below code and its output.

HTML Code

<div class="container">
  <div class="left-part">This is the content of left side. This is the content of left side. This is the content of left side.</div>
  <div class="spacer"></div>
  <div class="right-part">This is the content of right side.</div>
</div>

CSS Code

.container { display: flex; }
.left-part, .right-part { padding: 15px; color: #fff; }
.left-part { background-color: #3C0; }
.right-part { background-color: #F99; }
.spacer { flex-grow: 1; background: #6CF; }

Output

Catagory :HTML/CSS