Skip to content

Instantly share code, notes, and snippets.

@jonsuh
Last active May 2, 2024 19:01
Show Gist options
  • Save jonsuh/b2347347480105874cda110b2afc53f4 to your computer and use it in GitHub Desktop.
Save jonsuh/b2347347480105874cda110b2afc53f4 to your computer and use it in GitHub Desktop.
Flexbox utility classes
/* Flexbox
// ================================================== */
.d--f { display: flex; }
.d--if { display: inline-flex; }
/* Flex direction */
.fd--r { flex-direction: row; } /* Default */
.fd--rr { flex-direction: row-reverse; }
.fd--c { flex-direction: column; }
.fd--cr { flex-direction: column-reverse; }
/* Flex wrap */
.fw--n { flex-wrap: nowrap; } /* Default */
.fw--w { flex-wrap: wrap; }
.fw--wr { flex-wrap: wrap-reverse; }
/* Justify content */
.jc--fe { justify-content: flex-end; }
.jc--fs { justify-content: flex-start; } /* Default */
.jc--c { justify-content: center; }
.jc--sa { justify-content: space-around; }
.jc--sb { justify-content: space-between; }
/* Align items */
.ai--fs { align-items: flex-start; }
.ai--c { align-items: center; }
.ai--fe { align-items: flex-end; }
.ai--s { align-items: stretch; } /* Default */
.ai--b { align-items: baseline; }
/* Flex grow */
.fg--0 { flex-grow: 0; } /* Default */
.fg--1 { flex-grow: 1; }
/* Flex shrink */
.fs--0 { flex-shrink: 0; }
.fs--1 { flex-shrink: 1; } /* Default */
/* Flex basis */
.fb--a { flex-basis: auto; } /* Default */
.fb--0 { flex-basis: 0; }
/* Align self */
.as--a { align-self: auto; } /* Default */
.as--fs { align-self: flex-start; }
.as--c { align-self: center; }
.as--fe { align-self: flex-end; }
.as--s { align-self: stretch; }
.as--b { align-self: baseline }
@EtienneKoch1
Copy link

Thank you so much for this @jonsuh

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment