Skip to main content

Flexbox utility styles

The flexbox utility styles currently handle flex-direction styles.

Each flexbox base class has a class to go with each of the media query viewport sizes. For example:

flex-col-3xs
flex-col-2xs
flex-col-xs
flex-col-sm
flex-col-md
flex-col-lg
flex-col-xl
flex-col-1xl
flex-col-3xl
flex-col-4xl
flex-col-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/display/flex.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/display/3xs/flex.css';
@import 'cacao-css/dist/display/2xs/flex.css';
@import 'cacao-css/dist/display/xs/flex.css';
@import 'cacao-css/dist/display/sm/flex.css';
@import 'cacao-css/dist/display/md/flex.css';
@import 'cacao-css/dist/display/lg/flex.css';
@import 'cacao-css/dist/display/xl/flex.css';
@import 'cacao-css/dist/display/2xl/flex.css';
@import 'cacao-css/dist/display/3xl/flex.css';
@import 'cacao-css/dist/display/4xl/flex.css';
@import 'cacao-css/dist/display/5xl/flex.css';

See Import Cacao CSS for more information.

Source CSS​

Default styles​

display/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

.flex-row {
    flex-direction: row;
}

.flex-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex-grow {
    flex-grow: 1
}

.flex-shrink {
    flex-shrink: 1
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-nowrap {
    flex-wrap: nowrap
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse
}

3xs styles​

display/3xs/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-3xs) {
    .flex-row-3xs {
        flex-direction: row;
    }

    .flex-reverse-3xs {
        flex-direction: row-reverse;
    }

    .flex-col-3xs {
        flex-direction: column;
    }

    .flex-col-reverse-3xs {
        flex-direction: column-reverse;
    }

    .flex-grow-3xs {
        flex-grow: 1;
    }

    .flex-shrink-3xs {
        flex-shrink: 1;
    }

    .flex-wrap-3xs {
        flex-wrap: wrap;
    }

    .flex-nowrap-3xs {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-3xs {
        flex-wrap: wrap-reverse;
    }
}

2xs styles​

display/2xs/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-2xs) {
    .flex-row-2xs {
        flex-direction: row;
    }

    .flex-reverse-2xs {
        flex-direction: row-reverse;
    }

    .flex-col-2xs {
        flex-direction: column;
    }

    .flex-col-reverse-2xs {
        flex-direction: column-reverse;
    }

    .flex-grow-2xs {
        flex-grow: 1;
    }

    .flex-shrink-2xs {
        flex-shrink: 1;
    }

    .flex-wrap-2xs {
        flex-wrap: wrap;
    }

    .flex-nowrap-2xs {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-2xs {
        flex-wrap: wrap-reverse;
    }
}

xs styles​

display/xs/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-xs) {
    .flex-row-xs {
        flex-direction: row;
    }

    .flex-reverse-xs {
        flex-direction: row-reverse;
    }

    .flex-col-xs {
        flex-direction: column;
    }

    .flex-col-reverse-xs {
        flex-direction: column-reverse;
    }

    .flex-grow-xs {
        flex-grow: 1;
    }

    .flex-shrink-xs {
        flex-shrink: 1;
    }

    .flex-wrap-xs {
        flex-wrap: wrap;
    }

    .flex-nowrap-xs {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-xs {
        flex-wrap: wrap-reverse;
    }
}

sm styles​

display/sm/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-sm) {
    .flex-row-sm {
        flex-direction: row;
    }

    .flex-reverse-sm {
        flex-direction: row-reverse;
    }

    .flex-col-sm {
        flex-direction: column;
    }

    .flex-col-reverse-sm {
        flex-direction: column-reverse;
    }

    .flex-grow-sm {
        flex-grow: 1;
    }

    .flex-shrink-sm {
        flex-shrink: 1;
    }

    .flex-wrap-sm {
        flex-wrap: wrap;
    }

    .flex-nowrap-sm {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-sm {
        flex-wrap: wrap-reverse;
    }
}

md styles​

display/md/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-md) {
    .flex-row-md {
        flex-direction: row;
    }

    .flex-reverse-md {
        flex-direction: row-reverse;
    }

    .flex-col-md {
        flex-direction: column;
    }

    .flex-col-reverse-md {
        flex-direction: column-reverse;
    }

    .flex-grow-md {
        flex-grow: 1;
    }

    .flex-shrink-md {
        flex-shrink: 1;
    }

    .flex-wrap-md {
        flex-wrap: wrap;
    }

    .flex-nowrap-md {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-md {
        flex-wrap: wrap-reverse;
    }
}

lg styles​

display/lg/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-lg) {
    .flex-row-lg {
        flex-direction: row;
    }

    .flex-reverse-lg {
        flex-direction: row-reverse;
    }

    .flex-col-lg {
        flex-direction: column;
    }

    .flex-col-reverse-lg {
        flex-direction: column-reverse;
    }

    .flex-grow-lg {
        flex-grow: 1;
    }

    .flex-shrink-lg {
        flex-shrink: 1;
    }

    .flex-wrap-lg {
        flex-wrap: wrap;
    }

    .flex-nowrap-lg {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-lg {
        flex-wrap: wrap-reverse;
    }
}

xl styles​

display/xl/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-xl) {
    .flex-row-xl {
        flex-direction: row;
    }

    .flex-reverse-xl {
        flex-direction: row-reverse;
    }

    .flex-col-xl {
        flex-direction: column;
    }

    .flex-col-reverse-xl {
        flex-direction: column-reverse;
    }

    .flex-grow-xl {
        flex-grow: 1;
    }

    .flex-shrink-xl {
        flex-shrink: 1;
    }

    .flex-wrap-xl {
        flex-wrap: wrap;
    }

    .flex-nowrap-xl {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-xl {
        flex-wrap: wrap-reverse;
    }
}

2xl styles​

display/2xl/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-2xl) {
    .flex-row-2xl {
        flex-direction: row;
    }

    .flex-reverse-2xl {
        flex-direction: row-reverse;
    }

    .flex-col-2xl {
        flex-direction: column;
    }

    .flex-col-reverse-2xl {
        flex-direction: column-reverse;
    }

    .flex-grow-2xl {
        flex-grow: 1;
    }

    .flex-shrink-2xl {
        flex-shrink: 1;
    }

    .flex-wrap-2xl {
        flex-wrap: wrap;
    }

    .flex-nowrap-2xl {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-2xl {
        flex-wrap: wrap-reverse;
    }
}

3xl styles​

display/3xl/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-3xl) {
    .flex-row-3xl {
        flex-direction: row;
    }

    .flex-reverse-3xl {
        flex-direction: row-reverse;
    }

    .flex-col-3xl {
        flex-direction: column;
    }

    .flex-col-reverse-3xl {
        flex-direction: column-reverse;
    }

    .flex-grow-3xl {
        flex-grow: 1;
    }

    .flex-shrink-3xl {
        flex-shrink: 1;
    }

    .flex-wrap-3xl {
        flex-wrap: wrap;
    }

    .flex-nowrap-3xl {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-3xl {
        flex-wrap: wrap-reverse;
    }
}

4xl styles​

display/4xl/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-4xl) {
    .flex-row-4xl {
        flex-direction: row;
    }

    .flex-reverse-4xl {
        flex-direction: row-reverse;
    }

    .flex-col-4xl {
        flex-direction: column;
    }

    .flex-col-reverse-4xl {
        flex-direction: column-reverse;
    }

    .flex-grow-4xl {
        flex-grow: 1;
    }

    .flex-shrink-4xl {
        flex-shrink: 1;
    }

    .flex-wrap-4xl {
        flex-wrap: wrap;
    }

    .flex-nowrap-4xl {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-4xl {
        flex-wrap: wrap-reverse;
    }
}

5xl styles​

display/5xl/flex.css
/* =========================================================================== *\
    Flexbox utilities
\* =========================================================================== */

@media (--m-5xl) {
    .flex-row-5xl {
        flex-direction: row;
    }

    .flex-reverse-5xl {
        flex-direction: row-reverse;
    }

    .flex-col-5xl {
        flex-direction: column;
    }

    .flex-col-reverse-5xl {
        flex-direction: column-reverse;
    }

    .flex-grow-5xl {
        flex-grow: 1;
    }

    .flex-shrink-5xl {
        flex-shrink: 1;
    }

    .flex-wrap-5xl {
        flex-wrap: wrap;
    }

    .flex-nowrap-5xl {
        flex-wrap: nowrap;
    }

    .flex-wrap-reverse-5xl {
        flex-wrap: wrap-reverse;
    }
}