flex-fill implementation


Topic: flex-fill implementation

Adrian Dragomir 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.


Bartosz Termena staff answered 5 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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