This article explained the concept pretty well! It not only showed how to use Flexbox, but also the reason it's designed this way. Here are a few things I learned:

• the default css layout algorithm is flow. flexbox and grid are two completely different layout. by using display: flex we are switching layout algorithm.
• justify means to position along primary axis, whereas align means to position along cross axis (think of a kebab skew vs cocktail wiener)
• content is a group of things that can be distributed, whereas items refers to single items that are positioned individually.
• width in flow layout is a hard constraint, whereas in flexbox layout it's a "hypothetical size", meaning only the hinted size.
• flex-basis is just like the width (or height) attribute along the primary axis. A difference is that flex-basis cannot reduce an item below its minimum size.
• flex-grow: n to use the remaining n_i/(sum n_i) of space; specially, flex-grow: 0 stick to its intrinsic size.
• flex-grow is used when the children's size combined is smaller than the size of container, whereas flex-shrink is used when children's size is bigger.
• flex-shrink: n shrinks the children by making each pay the debt in size. each pays a portion of (n_i/sum n_i); specially flex-shrink: 0 makes the child never shrink.
• flexbox layout never shrinks an item below its min-width (or height), regardless of their flex-shrink value, and even at the cost of overflowing the container.
• gap is a convenient attribute comparing to setting margin because it doesn't add spacing on the ends.
• margin: auto is an useful alternative to flex-grow: 1 because it gobbles up the spare space without changing the item's size.
• with flex-wrap: wrap, items won't shrink below their hypothetical size, and overflowed items wrap to a new row/column.
• when flex-wrap: wrap takes effect, we use align-content to adjust the position of all items about the cross-axis.