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
PrimeFlex
PrimeFlex

<div class="card flex overflow-hidden">
    <div class="flex-none flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">PrimeFlex</div>
    <div class="flex-grow-1 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">PrimeFlex</div>
    <div class="flex-none flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">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.

  • 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="card flex overflow-hidden">
    <div class="flex-grow-1 md:flex-grow-0 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Grow on small device</div>
</div>