Skip to content

Instantly share code, notes, and snippets.

@onlurking
Last active December 22, 2023 21:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save onlurking/09182e772992a45cb004b4013d10e083 to your computer and use it in GitHub Desktop.
Save onlurking/09182e772992a45cb004b4013d10e083 to your computer and use it in GitHub Desktop.
Flexbox Emmet Expansions

Flexbox Emmet Expansions

display

expansion: d:f, df:
display: flex;

flex-direction

expansion: fxd:r, fxdr:
flex-direction: row;

expansion: fxd:rr, fxdrr:
flex-direction: row-reverse;

expansion: fxd:c, fxdc:
flex-direction: column;

expansion: fxd:cr, fxdcr:
flex-direction: column-reverse;

flex-wrap

expansion: fxw:n, fxwn:
flex-wrap: nowrap;

expansion: fxw:w, fxww:
flex-wrap: wrap;

expansion: fxw:wr, fxwwr:
flex-wrap: wrap-reverse;

flex-flow

expansion: fxf:, fxf:
flex-flow: ;

justify-content

expansion: jcf:s, jcfs:
justify-content: flex-start;

expansion: jcf:e, jcfe:
justify-content: flex-end;

expansion: jc:c, jcc:
justify-content: center;

expansion: jc:sb, jcsb:
justify-content: space-between;

expansion: jc:sa, jcsa:
justify-content: space-around;

align-items

expansion: ai:s, ais:
align-items: stretch;

expansion: ai:fs, aifs:
align-items: flex-start;

expansion: ai:fe, aife:
align-items: flex-end;

expansion: ai:c, aic:
align-items: center;

expansion: ai:b, aib:
align-items: baseline;

align-content

expansion: ac:s, acs:
align-content: stretch;

expansion: ac:fs, acfs:
align-content: flex-start;

expansion: ac:fe, acfe:
align-content: flex-end;

expansion: ac:c, acc:
align-content: center;

expansion: ac:sb, acsb:
align-content: space-between;

expansion: ac:sa, acsa:
align-content: space-around;

flex-grow

expansion: fg:, fg:
flex-grow: ;

flex-basis

expansion: fb:, fb:
flex-basis: ;

flex-shrink

expansion: fxs:, fxs:
flex-shrink: ;

flex

expansion: fx:, fx:
flex: ;

order

expansion: od:, od:
order: ;

align-self

expansion: as:a, asa:
align-self: auto;

expansion: as:fs, asfs:
align-self: flex-start;

expansion: as:fe, asfe:
align-self: flex-end;

expansion: as:c, asc:
align-self: center;

expansion: as:b, asb:
align-self: baseline;

expansion: as:s, ass:
align-self: stretch;

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