How can I make flex items wrap onto another line?

Allow the flex container to wrap by setting flex-wrap: wrap. For example:

.card-list {
  display: flex;
  flex-wrap: wrap;
}

Flex items stay on one line by default because flex-wrap defaults to nowrap. On that single line, they may shrink to fit or overflow if they cannot shrink enough. With wrap, items move to another line when they do not fit. In a row layout, the added lines are rows. [S1]

The exact number of cards per row depends on the space available and the sizes of the items, so check your own content at the widths you care about.

Here is a simple layout with three cards. The flex-wrap rule permits an additional row:

<div class="card-list">
  <div class="card">First card</div>
  <div class="card">Second card</div>
  <div class="card">Third card</div>
</div>

.card-list {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 12rem;
}

As the container gets narrower, the cards may no longer all fit on one row; with wrapping enabled, items that do not fit can move to another row. [S1] The width shown here is an example, not a promise that a particular number of cards will fit at a particular screen size. Try the layout with your actual card content and surrounding page width.

No. Leaving out the rule means the default is nowrap, so flex items remain on one line. They may shrink to fit, or overflow if they cannot shrink enough. [S1] Wrapping gives the layout another option: when items do not fit, they can continue on a new line instead of being kept on the same line. [S1]

For your card list, use wrap if multiple rows are acceptable. If you specifically want one row, keep the default behavior and check how the cards look when they shrink; the result depends on your particular content and styling.

Put display: flex and flex-wrap: wrap on the element that directly contains the items you want to arrange. Then inspect the layout at a roomy width and a narrower width. Confirm that the items move to additional rows when they no longer fit, rather than assuming a particular breakpoint or row count. With flex-direction: row, new lines are rows; with column, new lines are columns. [S1]

A quick check is to temporarily add another item and narrow the container. If the items remain on one line, check that the wrapping rule is on the flex container you intended and that the active rule is wrap, not nowrap. The exact appearance depends on your page and styling.