Aby flex prvek (nebo více prvků) uskočil na další řádek, musíte jeho rodičovskému kontejneru nastavit vlastnost flex-wrap: wrap;.
Ve výchozím nastavení se totiž flex položky snaží vejít na jeden jediný řádek (flex-wrap: nowrap;).

.kontejner {
  display: flex;
  flex-wrap: wrap; /* Povolí zalamování prvků na další řádky */
}

.prvek {
  flex: 1 0 100%; /* Volitelné: Vynutí, aby tento konkrétní prvek zabral celou šířku a odsunul další */
}

3 způsoby, jak zalomení ovlivnit

• Povolení zalamování na základě šířky: Pokud nastavíte .kontejner { flex-wrap: wrap; }, prvky začnou automaticky padat na další řádek ve chvíli, kdy se vedle sebe kvůli své šířce (např. width: 300px; nebo flex-basis: 300px;) už nevejdou.
• Vynucení odskoku konkrétního prvku: Pokud chcete, aby jeden konkrétní prvek byl vždy na samostatném řádku (a vše za ním odskočilo), dejte mu šířku flex-basis: 100%; (nebo width: 100%;).
• Zalomení pomocí neviditelného prvku (Break): Můžete mezi dva prvky vložit prázdný element (např. <div class="break"></div>) s vlastnostmi:css

.break {
  flex-basis: 100%;
  height: 0;
}