Flex

A shorthand property to define flex-grow, flex-shrink and flex-basis at once.

Classes
Class Properties
flex-1 flex: 1 1 0%;
flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;
Initial

flex-initial sets flex-grow to 0, flex-shrink to 1 and flex-basis to auto which is the default setting of browsers.

Prime
Prime and PrimeFlex
Prime
Prime and PrimeFlex
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="card overflow-hidden">
    <div class="flex">
        <div class="flex-initial flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime</div>
        <div class="flex-initial flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime and PrimeFlex</div>
    </div>
    <div class="flex">
        <div class="flex-initial flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime</div>
        <div class="flex-initial flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime and PrimeFlex</div>
        <div class="flex-initial flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    </div>
</div>

Flex 1

Sets grow and shrink to 1 to auto grow and shrink while keeping flex-basis to 0.

Prime
Prime and PrimeFlex
Lorem ipsum dolor sit amet
Prime
Prime and PrimeFlex
Lorem ipsum dolor sit amet

<div class="card overflow-hidden">
    <div class="flex">
        <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime</div>
        <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime and PrimeFlex</div>
        <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="flex">
        <div class="flex-1 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime</div>
        <div class="flex-1 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime and PrimeFlex</div>
        <div class="flex-1 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet</div>
    </div>
</div>

Auto

Sets grow and shrink to 1 to auto grow and shrink while keeping flex-basis to auto.

Prime
Prime and PrimeFlex
Lorem ipsum dolor sit amet
Prime
Prime and PrimeFlex
Lorem ipsum dolor sit amet

<div class="card overflow-hidden">
    <div class="flex">
        <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime</div>
        <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime and PrimeFlex</div>
        <div class="flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="flex">
        <div class="flex-auto flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime</div>
        <div class="flex-auto flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Prime and PrimeFlex</div>
        <div class="flex-auto flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet</div>
    </div>
</div>

None

Same as "0 0 auto" meaning the element does not grow or shrink.

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="card overflow-hidden">
    <div class="flex">
        <div class="flex-1 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <div class="flex-1 flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </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-auto 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
flex-1 on small devices and none on bigger.
flex-1 on small devices and none on bigger.

<div class="card flex overflow-hidden">
    <div class="flex-1 md:flex-none flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">flex-1 on small devices and none on bigger.</div>
    <div class="flex-1 md:flex-none flex align-items-center justify-content-center font-bold text-blue-500 m-2 px-5 py-3 shadow-3">flex-1 on small devices and none on bigger.</div>
</div>