Flex Grow

Controls how much a flexible item grows.

Classes#

Class	Properties
flex-grow-0	flex-grow: 0;
flex-grow-1	flex-grow: 1;

Grow#

Second item grows while others do not.

PrimeFlex

<div class="flex overflow-hidden">
    <div class="flex-none flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">PrimeFlex</div>
    <div class="flex-grow-1 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">PrimeFlex</div>
    <div class="flex-none flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">PrimeFlex</div>
</div>

Responsive#

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:flex-grow-1 to use a responsive class.

Class	Description
sm:	small screens e.g. phones
md:	medium screens e.g. tablets
lg:	large screens e.g. notebooks
xl:	larger screens e.g monitors

Grow on small device

<div class="flex overflow-hidden">
    <div class="flex-grow-1 md:flex-grow-0 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Grow on small device</div>
</div>