Menu
In the doc and in the issues of Bootstrap v4 (here), I can't see any plan on supporting flex-grow, something with a syntax like this for example:
<div class="d-flex"> <div class="flex-grow"> I use all the space left </div> <div> I am a small text on the right </div> </div> Here a sample of the layout I'd like to create:
The export button is always on the right, and the navigation button takes all the space left and therefore looks clean.
Is it possible to build such a layout already? Maybe it is not advised? Of course, there are workarounds using CSS, but I am looking for a clean solution, ideally using Bootstrap class names only to guarantee consistency.
399
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. Note: If the element is not a flexible item, the flex-grow property has no effect.
It has no affect on height.
Flex-shrink is the opposite of flex-grow, determining how much a square is allowed to shrink. It only comes into play if the elements must shrink to fit into their container — i.e. when the container is just too small. Its main use is to specify which items you want to shrink, and which items you don't.
The flex-grow property is a sub-property of the Flexible Box Layout module. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
use .col for a simple flex-grow: 1;. It's described here https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col"> I use all the space left </div> <div class="col-sm col-sm-auto"> I am a small text on the right </div> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
