Flex item not wrapping in flex container

Flex wrap hiba: add hozzá a flex-wrap: wrap tulajdonságot, hogy a gyermekek több sorba is törjenek.

Flex wrap

Hibaüzenet

Flex item not wrapping in flex container

Hibás kód

.container { display: flex; }
.item { flex: 1 1 200px; }

Javított kód

.container { display: flex; flex-wrap: wrap; }
.item { flex: 1 1 200px; }

Magyarázat

Flex wrap hiba akkor fordul elő, amikor egy flex konténer elemei nem törnek új sorba, ha nem férnek el egy sorban. Alapértelmezésben a flexbox egy sorban rendezi a gyermekeket, ami széles kijelzőn kívül scrollhoz vagy overflow-hoz vezethet. A megoldás, hogy a konténerhez hozzáadod: flex-wrap: wrap;, így a gyermek elemek új sorba törnek, amikor szükséges.

További információ: MDN – flex-wrap