نستخدم الخاصية flex-direction بالقيمة column:

.container {
  display: flex;
  flex-direction: column;
}

بهذا تُرتَّب العناصر من الأعلى إلى الأسفل بدل أن تكون بجانب بعضها.

القيم الأربع

• row: أفقيًا (الافتراضي).
• row-reverse: أفقيًا بترتيب معكوس.
• column: عموديًا.
• column-reverse: عموديًا بترتيب معكوس.

انتبه

مع column ينقلب دور المحاذاة: justify-content يصبح للمحور العمودي، وalign-items للأفقي.

لا توجد قيمة اسمها horizontal، والخاصية direction شيء آخر: اتجاه النص (rtl أو ltr).