flex-direction — CSS-властивість, яка визначає, як flex-елементи розташовуються у flex-контейнері вздовж основної осі та в якому напрямку (нормальному або зворотному).
Зверніть увагу, що значення row і row-reverse залежать від напряму flex-контейнера. Якщо його атрибут dir дорівнює ltr, row представляє собою горизонтальну вісь зліва направо, а row-reverse — справа наліво; якщо атрибут dir дорівнює rtl, row означає вісь справа наліво, а row-reverse — зліва направо.
Проблема може виникнути, якщо у вас фіксована ширина або висота макету: ваші flexbox-елементи можуть переповнити контейнер і зламати макет.
Ми бачимо, що дочірні елементи виходять за межі свого батьківського контейнера.
Один із способів це виправити — додати наступну властивість: flex-wrap: wrap
flex-wrap: wrap
Тепер у нас кілька рядів у макеті — усі дочірні блоки, які не поміщаються, переносяться на новий рядок, щоб уникнути переповнення. Властивість flex: 200px, встановлена для статей, означає, що кожен блок має бути щонайменше 200 пікселів завширшки.