Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Flexbox notes.md

Quick Guide to Flexbox

Flex container

display: flex;
flex-direction: row | column;
/* main axis alignment: */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
/* cross axis alignment: */
align-items: flex-start | flex-end | center | baseline | stretch;

Not so important:

flex-wrap: nowrap | wrap;
/* what to do when there's space left in cross axis */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Flex item

flex-grow: 1;
  • how much of main axis to take (proportional to sum of all items flex-grow values)
  • Important => set flex-basis to zero if you want proportions to work properly
  • set this to 0 to make item with fixed size (will be dictated by flex-basis)

flex-shrink: 0;
  • proportion to use if items need to shrink (set to zero to disable shrinking)

flex-basis: 0;
  • base size to start with; set this to zero if you want flex-grow to prevail
  • set this to some size (in px, em, cm, etc) to fix this item's size
  • think of flex-basis as width, but agnostic of orientation (works with flex-direction: column)

Define them together, like this (considered good practice):

flex: <flex-grow> <flex-shrink> <flex-basis>

Other (not so important) properties:

/* override parent's `align-items` for this item */
align-self: auto | flex-start | flex-end | center | baseline | stretch;

/* to reorder items */
order: 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment