flex-basis sets the starting size of the item before any growing or shrinking takes place. flex-grow determines how much the item will expand to fill extra space relative to other flex items. flex-shrink determines how much the item will contract when there is not enough space. All three can be combined using the flex shorthand, for example flex: 1 1 auto.

Both create a flex container. display: flex makes the container block-level - it takes the full available width and starts on a new line. display: inline-flex makes the container inline - it only takes up as much width as its content and flows alongside other inline elements.

flex-direction sets the main axis of the flex container. row (default) places items left to right, row-reverse places them right to left, column stacks them top to bottom, and column-reverse stacks them bottom to top. Changing flex-direction also swaps which axis justify-content and align-items apply to.