Cirrus

#Flexbox

New
0.6.0

These are utility classes that are related to flexbox.

ClassStyles
u-flex
display: flex;
u-inline-flex
display: inline-flex;
u-flex-row
display: row !important;
u-flex-row-reverse
display: row-reverse !important;
u-flex-column
display: column !important;
u-flex-column-reverse
display: column-reverse !important;
u-align-stretch
align-items: stretch !important;
u-align-flex-start
align-items: flex-start !important;
u-align-center
align-items: center !important;
u-align-flex-end
align-items: flex-end !important;
u-align-baseline
align-items: baseline !important;
u-justify-flex-start
justify-content: flex-start !important;
u-justify-center
justify-content: center !important;
u-justify-flex-end
justify-content: flex-end !important;
u-justify-space-between
justify-content: space-between !important;
u-justify-space-around
justify-content: space-around !important;
u-justify-space-evenly
justify-content: space-evenly !important;
u-flex-grow-0
flex-grow: 0 !important;
u-flex-grow-1
flex-grow: 1 !important;
u-flex-shrink-0
flex-shrink: 0 !important;
u-flex-shrink-1
flex-shrink: 1 !important;
u-basis-auto
flex-basis: auto !important;
u-basis-max-content
flex-basis: max-content !important;
u-basis-min-content
flex-basis: min-content !important;
u-basis-fit-content
flex-basis: fit-content !important;
u-basis-content
flex-basis: content !important;
u-basis-revert
flex-basis: revert !important;
u-basis-revert-layer
flex-basis: revert-layer !important;

#Flex

To use the classes that are listed above (besides the ones listed here), you must wrap them with either a u-flex or u-inline-flex class.

Flex

The standard flex layout with the u-flex class.

a
b
c
<div class="u-flex bg-green-100">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Inline Flex

The inline flex layout with the u-inline-flex class.

a
b
c
<div class="u-inline-flex bg-green-100">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>

#Flex Direction

Row

Sets the flex direction to be row using the u-flex-row class.

a
b
c
<div class="u-flex u-flex-row">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Row-reverse

Sets the flex direction to be row-reverse using the u-flex-row-reverse class.

a
b
c
<div class="u-flex u-flex-row-reverse">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Column

Sets the flex direction to be column using the u-flex-column class.

a
b
c
<div class="u-flex u-flex-column">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Column-reverse

Sets the flex direction to be column-reverse using the u-flex-column-reverse class.

a
b
c
<div class="u-flex u-flex-column-reverse">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>

#Align Items

Used for setting the alignment of items vertically.

Stretch

Sets the item alignment to be stretch using the u-items-stretch class.

a
b
c
<div class="u-flex u-items-stretch" style="height: 150px;">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Flex-start

Sets the item alignment to be flex-start using the u-items-flex-start class.

a
b
c
<div class="u-flex u-items-flex-start" style="height: 150px;">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Center

Sets the item alignment to be center using the u-items-center class.

a
b
c
<div class="u-flex u-items-center" style="height: 150px;">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Flex-end

Sets the item alignment to be flex-end using the u-items-flex-end class.

a
b
c
<div class="u-flex u-items-flex-end" style="height: 150px;">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Baseline

Sets the flex direction to be baseline using the u-items-baseline class. Note that the items are aligned based on their respective baselines despite the differences in size.

a

b
c
<div class="u-flex u-items-baseline" style="height: 150px;">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">
        <h3>a</h3></div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">
        <h6>b</h6></div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>

#Justify Content

Used for setting the alignment of items horizontally.

Flex-start

Sets the item justification to be flex-start using the u-justify-flex-start class.

a
b
c
<div class="u-flex u-justify-flex-start">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Center

Sets the item justification to be center using the u-justify-center class.

a
b
c
<div class="u-flex u-justify-center">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Flex-end

Sets the item justification to be flex-end using the u-justify-flex-end class.

a
b
c
<div class="u-flex u-justify-flex-end">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Space-between

Sets the item justification to be space-between using the u-justify-space-between class. This class ensures equal spacing among the elements, but not outside of it.

a
b
c
<div class="u-flex u-justify-space-between">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Space-around

Sets the item justification to be space-around using the u-justify-space-around class. This class ensures equal spacing among the elements and outside of it.

a
b
c
<div class="u-flex u-justify-space-around">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>
Space-evenly

Sets the item justification to be space-evenly using the u-justify-space-evenly class. This class ensures equal spacing among the elements, but doubles the space outside of it.

a
b
c
<div class="u-flex u-justify-space-evenly">
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">b</div>
    <div class="bg-green-500 u-shadow-lg text-white px-2 py-1 m-1 u-round-xs">c</div>
</div>

#Flex Grow

Flex grow utilities control how elements will grow in a flex display. Classes follow the form of u-flex-grow-[0|1].

Use u-flex-grow-1 to allow a flex item to grow relative to the parent and sibling elements.

0
1
0
<div class="u-flex u-gap-2 u-round-xs bg-indigo-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-indigo-300 p-2 u-flex-grow-0">0</div>
    <div class="u-round-xs u-shadow-lg bg-indigo-500 p-2 u-flex-grow-1">1</div>
    <div class="u-round-xs u-shadow-lg bg-indigo-300 p-2 u-flex-grow-0">0</div>
</div>

Use u-flex-grow-0 to prevnt a flex item from growing relative to the parent and sibling elements.

1
0
1
<div class="u-flex u-gap-2 u-round-xs bg-pink-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-pink-300 p-2 u-flex-grow-1">1</div>
    <div class="u-round-xs u-shadow-lg bg-pink-500 p-2 u-flex-grow-0">0</div>
    <div class="u-round-xs u-shadow-lg bg-pink-300 p-2 u-flex-grow-1">1</div>
</div>

#Flex Shrink

Flex shrink utilities control how elements will shrink in a flex display. Classes follow the form of u-flex-shrink-[0|1].

Use u-flex-shrink-1 to allow a flex item to shrink relative to the parent and sibling elements.

0
1
0
<div class="u-flex u-gap-2 u-round-xs bg-blue-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-blue-300 p-2">0</div>
    <div class="u-round-xs u-shadow-lg bg-blue-500 p-2 u-flex-shrink-1 w-100p">
        1
    </div>
    <div class="u-round-xs u-shadow-lg bg-blue-300 p-2">0</div>
</div>

Use u-flex-shrink-0 to prevent a flex item to shrink relative to the parent and sibling elements.

1
0
1
<div class="u-flex u-gap-2 u-round-xs bg-orange-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-orange-300 p-2 u-flex-grow-1 u-flex-shrink-1">
        1
    </div>
    <div
        class="u-round-xs u-shadow-lg bg-orange-500 p-2 u-flex-shrink-0 w-16"
    >
        0
    </div>
    <div class="u-round-xs u-shadow-lg bg-orange-300 p-2 u-flex-grow-1 u-flex-shrink-1">
        1
    </div>
</div>

#Flex Wrap

Flex wrap utilities control how flex elements wrap inside the parent container. Classes follow the form of u-flex-[wrap|nowrap|wrap-reverse].

#Wrap

Use u-flex-wrap to allow flex elements to wrap in the parent.

1
2
3
<div class="u-flex u-flex-wrap u-gap-2 u-round-xs bg-pink-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-pink-500 p-2 w-40p">1</div>
    <div class="u-round-xs u-shadow-lg bg-pink-500 p-2 w-40p">2</div>
    <div class="u-round-xs u-shadow-lg bg-pink-500 p-2 w-40p">3</div>
</div>
#No Wrap

Use u-flex-nowrap to prevent flex elements from wrapping in the parent.

1
2
3
<div class="u-flex u-flex-nowrap u-gap-2 u-round-xs bg-teal-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-teal-500 p-2 w-40p">1</div>
    <div class="u-round-xs u-shadow-lg bg-teal-500 p-2 w-40p">2</div>
    <div class="u-round-xs u-shadow-lg bg-teal-500 p-2 w-40p">3</div>
</div>
#Wrap Reverse

Use u-flex-wrap-reverse wrap elements in reverse.

1
2
3
<div class="u-flex u-flex-wrap-reverse u-gap-2 u-round-xs bg-indigo-100 p-3 text-white font-bold u-text-center">
    <div class="u-round-xs u-shadow-lg bg-indigo-500 p-2 w-40p">1</div>
    <div class="u-round-xs u-shadow-lg bg-indigo-500 p-2 w-40p">2</div>
    <div class="u-round-xs u-shadow-lg bg-indigo-500 p-2 w-40p">3</div>
</div>

#Flex Basis

New
0.7.1

Utility classes to set the initial size for flexbox based items.

auto
max-content
min-content
fit-content
content
<div class="u-flex h-12 bg-orange-200 u-round-xs p-3 font-bold text-white u-gap-1">
    <div class="bg-orange-500 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-basis-auto">auto</div>
    <div class="bg-orange-500 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-basis-max-content">
        max-content
    </div>
    <div class="bg-orange-500 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-basis-min-content">
        min-content
    </div>
    <div class="bg-orange-500 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-basis-fit-content">
        fit-content
    </div>
    <div class="bg-orange-500 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-basis-content">content</div>
</div>

You can also use flex-basis util classes with percentages.

20
30
50
<div class="u-flex h-12 bg-red-200 font-bold text-white p-3 u-gap-1">
    <div class="bg-red-600 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-justify-center u-basis-20p">20</div>
    <div class="bg-red-600 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-justify-center u-basis-30p">30</div>
    <div class="bg-red-600 u-shadow-lg p-2 u-round-xs u-flex u-items-center u-justify-center u-basis-50p">50</div>
</div>

#Responsive

New
0.6.2

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use u-flex-row-md to apply u-flex-row on medium screens and above.

<div class="u-flex u-flex-column u-flex-row-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.