Flex is very useful and commonly used in daily development, here summarizes several common use cases:

• navigation
• center an element horizontally or vertically
• together with input
• responsive website layout
• display icons in multi-lines

Navigation

Center an Element Horizontally or Vertically

Btw, using place-items: center in grid layout to center an element is more elegant.

.container {
  display: grid;
  place-items: center;
  ...
}
...

Together with Input

Input's width is adjusted automatically.

Responsive Website Layout

One side's with is fixed, the other is flexible.

Display Icons in Multi-lines