Skip to main content

Aligning flexbox items

The align styles handle aligning flexbox items with align-items.

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

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

How to import into your CSS​

Import this into your CSS with:

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

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS​

Default styles​

display/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

3xs styles​

display/3xs/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-3xs) {
    .align-start-3xs {
        align-items: flex-start;
    }

    .align-center-3xs {
        align-items: center;
    }

    .align-end-3xs {
        align-items: flex-end;
    }
}

2xs styles​

display/2xs/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-2xs) {
    .align-start-2xs {
        align-items: flex-start;
    }

    .align-center-2xs {
        align-items: center;
    }

    .align-end-2xs {
        align-items: flex-end;
    }
}

xs styles​

display/xs/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-xs) {
    .align-start-xs {
        align-items: flex-start;
    }

    .align-center-xs {
        align-items: center;
    }

    .align-end-xs {
        align-items: flex-end;
    }
}

sm styles​

display/sm/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-sm) {
    .align-start-sm {
        align-items: flex-start;
    }

    .align-center-sm {
        align-items: center;
    }

    .align-end-sm {
        align-items: flex-end;
    }
}

md styles​

display/md/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-md) {
    .align-start-md {
        align-items: flex-start;
    }

    .align-center-md {
        align-items: center;
    }

    .align-end-md {
        align-items: flex-end;
    }
}

lg styles​

display/lg/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-lg) {
    .align-start-lg {
        align-items: flex-start;
    }

    .align-center-lg {
        align-items: center;
    }

    .align-end-lg {
        align-items: flex-end;
    }
}

xl styles​

display/xl/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-xl) {
    .align-start-xl {
        align-items: flex-start;
    }

    .align-center-xl {
        align-items: center;
    }

    .align-end-xl {
        align-items: flex-end;
    }
}

2xl styles​

display/2xl/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-2xl) {
    .align-start-2xl {
        align-items: flex-start;
    }

    .align-center-2xl {
        align-items: center;
    }

    .align-end-2xl {
        align-items: flex-end;
    }
}

3xl styles​

display/3xl/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-3xl) {
    .align-start-3xl {
        align-items: flex-start;
    }

    .align-center-3xl {
        align-items: center;
    }

    .align-end-3xl {
        align-items: flex-end;
    }
}

4xl styles​

display/4xl/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-4xl) {
    .align-start-4xl {
        align-items: flex-start;
    }

    .align-center-4xl {
        align-items: center;
    }

    .align-end-4xl {
        align-items: flex-end;
    }
}

5xl styles​

display/5xl/align.css
/* =========================================================================== *\
    Alignment utilities
\* =========================================================================== */

@media (--m-5xl) {
    .align-start-5xl {
        align-items: flex-start;
    }

    .align-center-5xl {
        align-items: center;
    }

    .align-end-5xl {
        align-items: flex-end;
    }
}