Excellent explanation of how flex works in css via hackernews

Errata: the article states "there is no justify-items" or justify-self but there is.

Your Notes

Think of flow (default), flex, grid as totally different layout engines. Think of css properties as inputs to functions. Different functions act on properties of the same name differently

For flex box:

• primary axis, default is row. Change with flex-direction: column; default is children bunch at the left for row, top for column, aka the start
• cross axis is the other direction; default is children stretch to fill (from elsewhere, also called the "block direction")
• justify-content changes how children are distributed along primary axis (also called the "inline direction"); flex-start | center | flex-end | space-between | space-around | space-evenly
  • UPDATE: justify-self sets the way a box is justified inside its alignment container along the appropriate (primary/inline?) axis. For example, in a display: grid a direct child can change if it stretches to fill, is centered, or mushed left (start) or right (end)
  • UPDATE: justify-items is like setting justify-self for all children
• align-items changes how children are distributed along cross axis: stretch | flex-start | center | flex-end | baseline -- not sure about baseline
• UPDATE: place-items is shorthand for setting both justify-items and align-items at the same time
• UPDATE: Your new understanding that needs to be validated:
  • justify is for primary/inline axis, default row
  • align is for cross/block axis, default column
  • -items is for applying -self to all children
  • -content is for applying to all children as a group
• children
  • align-self for a child overrides align-items for individual child (i.e. align-items is like align-self for every child)
  • width or height for flex child is a hypothetical ideal size, not a guarantee
  • flex-basis is the size along the primary axis (also hypothetical ideal); in a row direction flex-basis works like width, but there are edge case differences, e.g. width can reduce element below min-width but flex-basis cannot
  • flex-grow is default; value represents how much of the extra space to use as a fraction of all flex-grow values, e.g. if we have two elements, one with flex-grow: 2 and one with flex-grow: 1, the first item will grow to 2/3 of the container, the second to 1/3.
  • flex-shrink works the same way, but is how much space to take away; default is 1, 0 to prevent shrinkage
    • BUT will not shrink below minimum size - which for width is the longest unbreakable string of characters; you can use min-width: 0px to "fix"
  • gap is available in all modern browsers (as of 2021) - it's a gutter b/t children (does it apply between wrapped rows?)
  • handy trick: setting margin-right: auto e.g on first child will use up all available extra space, handy for menu bar where you have logo on left, empty space, then several nav items
  • flex-wrap: wrap - allows children to wrap; each row (with row direction) acts like its own primary axis