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

Mantle UI and Mantle Flex

Prime

Mantle UI and Mantle Flex

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

<div class="flex">
    <div class="flex-initial flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime</div>
    <div class="flex-initial flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Mantle UI and Mantle Flex</div>
</div>
<div class="flex">
    <div class="flex-initial flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime</div>
    <div class="flex-initial flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Mantle UI and Mantle Flex</div>
    <div class="flex-initial flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.{' '}
    </div>
</div>

Flex 1#

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

Prime

Mantle UI and Mantle Flex

Lorem ipsum dolor sit amet

Prime

Mantle UI and Mantle Flex

Lorem ipsum dolor sit amet

<div class="flex">
    <div class="flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime</div>
    <div class="flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Mantle UI and Mantle Flex</div>
    <div class="flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex">
    <div class="flex-1 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime</div>
    <div class="flex-1 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Mantle UI and Mantle Flex</div>
    <div class="flex-1 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
</div>

Auto#

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

Prime

Mantle UI and Mantle Flex

Lorem ipsum dolor sit amet

Prime

Mantle UI and Mantle Flex

Lorem ipsum dolor sit amet

<div class="overflow-hidden">
    <div class="flex">
        <div class="flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime</div>
        <div class="flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Mantle UI and Mantle Flex</div>
        <div class="flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="flex">
        <div class="flex-auto flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Prime</div>
        <div class="flex-auto flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Mantle UI and Mantle Flex</div>
        <div class="flex-auto flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">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

<div class="overflow-hidden">
    <div class="flex">
        <div class="flex-1 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
        <div class="flex-none flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
        <div class="flex-1 flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</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.

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

flex-1 on small devices and none on bigger.

flex-1 on small devices and auto on bigger.

<div class="overflow-hidden">
    <div class="flex">
        <div class="flex-1 md:flex-none flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">flex-1 on small devices and none on bigger.</div>
        <div class="flex-1 md:flex-none flex align-items-center justify-content-center bg-primary font-bold m-2 px-5 py-3 border-round">flex-1 on small devices and none on bigger.</div>
    </div>
</div>