نستخدم الخاصية flex-direction بالقيمة column:
.container {
display: flex;
flex-direction: column;
}بهذا تُرتَّب العناصر من الأعلى إلى الأسفل بدل أن تكون بجانب بعضها.
القيم الأربع
row: أفقيًا (الافتراضي).row-reverse: أفقيًا بترتيب معكوس.column: عموديًا.column-reverse: عموديًا بترتيب معكوس.
انتبه
مع column ينقلب دور المحاذاة: justify-content يصبح للمحور العمودي، وalign-items للأفقي.
لا توجد قيمة اسمها horizontal، والخاصية direction شيء آخر: اتجاه النص (rtl أو ltr).