Which flexbox rule is responsible for arranging flex items in a single line or multiple lines?

flex-wrap.

It determines whether flex items will be squeezed to fit in one line or wrapped onto a new line if necessary.

Possible values:

• nowrap (default): Items stay in one line, shrinking in width.
• wrap: Items are wrapped onto a new line when overflowing the container. Wrapping occurs from left to right, top to bottom (for LTR).
• wrap-reverse: Items are wrapped onto a new line, but in reverse order: right to left, bottom to top (for LTR).

.container {
  display: flex;
  flex-wrap: wrap; /* Items will wrap onto a new line */
}