Grid vs Flexbox

Grid is ideally suited for lining things up in two dimensions, whereas flexbox is ideally suited for lining things up in one dimension.

But Grid can be used in one-dimension only.

Flex only needs to be used when you need to control the distribution of the elements. In the layout below, the elements within the Yellow and Red sections will evenly distribute themselves by default and so do not need to be in a flex container.

Whereas, in the following examples, the elements take up different proportions of the container and the order of the elements is reversed. These are properties of the flex container.

Flexbox Wrapping

Flexbox can wrap elements, but it still is only laying the elements out in a single direction.

Flexbox is ideally suited for one-dimension

Resources