flex-fill implementation

Topic: flex-fill implementation

Adrian Dragomir free asked 5 years ago

**Expected behavior**

I would like to put 4 divs with different content in a row, each having the same weight. I did like that:

<div class="d-flex flex-row">
<div class="flex-fill">Flex item</div>
<div class="flex-fill">Flex item item</div>
<div class="flex-fill">Flex item item item</div>
</div>

**Actual behavior**

But it's not working, each div has different weight based on its content length.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Dear @Adrian Dragomir

If you want to display 4 divs in a row, try to use bootstrap grid system:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">Item</div>
    <div class="col-md-3">Item</div>
    <div class="col-md-3">Item</div>
    <div class="col-md-3">Item</div>
  </div>
</div>

Hope it helps!

Best Regards, Bartosz.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.5.0
Device: any
Browser: any
OS: any
Provided sample code: No
Provided link: No

Adrian Dragomir

70Support score
5Questions 4Answers 1Snippets