Cirrus

#Flexbox

Added
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;
u-flex-row-reverse
display: row-reverse;
u-flex-column
display: column;
u-flex-column-reverse
display: column-reverse;
u-align-stretch
align-items: stretch;
u-align-flex-start
align-items: flex-start;
u-align-center
align-items: center;
u-align-flex-end
align-items: flex-end;
u-align-baseline
align-items: baseline;
u-justify-flex-start
justify-content: flex-start;
u-justify-center
justify-content: center;
u-justify-flex-end
justify-content: flex-end;
u-justify-space-between
justify-content: space-between;
u-justify-space-around
justify-content: space-around;
u-justify-space-evenly
justify-content: space-evenly;

#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-orange-100">
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">c</div>
</div>
Inline Flex

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

a
b
c
<div class="u-inline-flex bg-orange-100">
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">
        <h3>a</h3></div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">
        <h6>b</h6></div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">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-orange-200 px-2 py-1 m-1 u-round">a</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">b</div>
    <div class="bg-orange-200 px-2 py-1 m-1 u-round">c</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.