Justify flexbox items

The justify utility styles currently handle justify-content styles.

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

justify-start-3xs
justify-start-2xs
justify-start-xs
justify-start-sm
justify-start-md
justify-start-lg
justify-start-xl
justify-start-1xl
justify-start-3xl
justify-start-4xl
justify-start-5xl

How to import into your CSS

Import this into your CSS with:

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

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS

Default styles

display/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

3xs styles

display/3xs/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-3xs) {
    .justify-start-3xs {
        justify-content: flex-start;
    }

    .justify-center-3xs {
        justify-content: center;
    }

    .justify-end-3xs {
        justify-content: flex-end;
    }

    .justify-between-3xs {
        justify-content: space-between;
    }

    .justify-around-3xs {
        justify-content: space-around;
    }
}

2xs styles

display/2xs/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-2xs) {
    .justify-start-2xs {
        justify-content: flex-start;
    }

    .justify-center-2xs {
        justify-content: center;
    }

    .justify-end-2xs {
        justify-content: flex-end;
    }

    .justify-between-2xs {
        justify-content: space-between;
    }

    .justify-around-2xs {
        justify-content: space-around;
    }
}

xs styles

display/xs/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-xs) {
    .justify-start-xs {
        justify-content: flex-start;
    }

    .justify-center-xs {
        justify-content: center;
    }

    .justify-end-xs {
        justify-content: flex-end;
    }

    .justify-between-xs {
        justify-content: space-between;
    }

    .justify-around-xs {
        justify-content: space-around;
    }
}

sm styles

display/sm/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-sm) {
    .justify-start-sm {
        justify-content: flex-start;
    }

    .justify-center-sm {
        justify-content: center;
    }

    .justify-end-sm {
        justify-content: flex-end;
    }

    .justify-between-sm {
        justify-content: space-between;
    }

    .justify-around-sm {
        justify-content: space-around;
    }
}

md styles

display/md/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-md) {
    .justify-start-md {
        justify-content: flex-start;
    }

    .justify-center-md {
        justify-content: center;
    }

    .justify-end-md {
        justify-content: flex-end;
    }

    .justify-between-md {
        justify-content: space-between;
    }

    .justify-around-md {
        justify-content: space-around;
    }
}

lg styles

display/lg/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-lg) {
    .justify-start-lg {
        justify-content: flex-start;
    }

    .justify-center-lg {
        justify-content: center;
    }

    .justify-end-lg {
        justify-content: flex-end;
    }

    .justify-between-lg {
        justify-content: space-between;
    }

    .justify-around-lg {
        justify-content: space-around;
    }
}

xl styles

display/xl/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-xl) {
    .justify-start-xl {
        justify-content: flex-start;
    }

    .justify-center-xl {
        justify-content: center;
    }

    .justify-end-xl {
        justify-content: flex-end;
    }

    .justify-between-xl {
        justify-content: space-between;
    }

    .justify-around-xl {
        justify-content: space-around;
    }
}

2xl styles

display/2xl/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-2xl) {
    .justify-start-2xl {
        justify-content: flex-start;
    }

    .justify-center-2xl {
        justify-content: center;
    }

    .justify-end-2xl {
        justify-content: flex-end;
    }

    .justify-between-2xl {
        justify-content: space-between;
    }

    .justify-around-2xl {
        justify-content: space-around;
    }
}

3xl styles

display/3xl/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-3xl) {
    .justify-start-3xl {
        justify-content: flex-start;
    }

    .justify-center-3xl {
        justify-content: center;
    }

    .justify-end-3xl {
        justify-content: flex-end;
    }

    .justify-between-3xl {
        justify-content: space-between;
    }

    .justify-around-3xl {
        justify-content: space-around;
    }
}

4xl styles

display/4xl/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-4xl) {
    .justify-start-4xl {
        justify-content: flex-start;
    }

    .justify-center-4xl {
        justify-content: center;
    }

    .justify-end-4xl {
        justify-content: flex-end;
    }

    .justify-between-4xl {
        justify-content: space-between;
    }

    .justify-around-4xl {
        justify-content: space-around;
    }
}

5xl styles

display/5xl/justify.css

/* =========================================================================== *\
    Justification utilities
\* =========================================================================== */

@media (--m-5xl) {
    .justify-start-5xl {
        justify-content: flex-start;
    }

    .justify-center-5xl {
        justify-content: center;
    }

    .justify-end-5xl {
        justify-content: flex-end;
    }

    .justify-between-5xl {
        justify-content: space-between;
    }

    .justify-around-5xl {
        justify-content: space-around;
    }
}