CSS Flexbox notes.md

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;