Utility for the flex-grow property

[tompazourek]

I think there could be an utility class like f-grow-1 that would correspond to CSS rule flex-grow: 1. (possibly also f-grow-2, f-grow-3, etc.)

I've been really enjoying working with the Bootstrap 4 flexbox utility classes, but I feel this one is still missing and could be very useful for a lot of people to do stuff like this:

https://stackoverflow.com/questions/29467660/flexbox-row-how-to-stretch-children-to-fill-cross-axis

If it's a stupid idea, please let me know why.

[iatek]

IMO this would be very useful and I've already encountered several use cases for it.

[iatek]

I keep finding more use cases for a flex grow utility..

• Sticky footer
• Horizontal centering of navbar elements (flexbox children)

[manju-reddys]

May be something like

[toyeca]

I would also appreciate this functionality. Bootstrap lets you flex-grow: 1 in horizontal layout using col class, but this functionality is not present for vertical layouts.

[uclaitsscott]

In my projects, I've added a fill class flex: 1 to cover this since I utilize some fixed width columns and rows inside.

[SuperPat45]

I need also a flex-grow-0 utility for columns that should grow on mobile but not in desktop resolutions like:

<div class="row">
<div class="col-12 col-md"><input /></div>
<div class="col f-grow-md-0"><span>+</span></div>
<div class="col-12 col-md"><input /></div>
</div>

[bertday]

I would definitely use this! :D

[cupofjoakim]

+1. We're currently setting and using our own utility for this, but should definitely be part of default utility classes.

Edit: For some of us (myself included) .flex-fillmight do what we needed this for. Actually had to look though the source code to find it though, since it's under the nav section in the docs...

https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_flex.scss#L19

Apparently it was dropped for an unknown reason (mentioned here: #25375).

[AaronLayton]

100% back this

[ghost]

We have a layout where flex-grow-0 and flex-grow-1 would be handy.

[ThinkWired]

+1

I just created my own help class to do just this.