52. خاصية حاوية Flex: flex-direction
تحدد خاصية flex-direction المحور الرئيسي، وبذلك تحدد الاتجاه الذي يتم فيه وضع عناصر flex في الحاوية.
القيم المتاحة
| القيمة | الاتجاه | نقاط البداية/النهاية |
|---|---|---|
row (افتراضي) | من اليسار إلى اليمين (أفقي) | البداية = اليسار، النهاية = اليمين |
row-reverse | من اليمين إلى اليسار (أفقي) | البداية = اليمين، النهاية = اليسار |
column | من الأعلى إلى الأسفل (عمودي) | البداية = الأعلى، النهاية = الأسفل |
column-reverse | من الأسفل إلى الأعلى (عمودي) | البداية = الأسفل، النهاية = الأعلى |
أمثلة
التخطيط الأفقي (الافتراضي)
css .container-row { display: flex; flex-direction: row; } /* العناصر 1، 2، 3 مرتبة أفقياً */
التخطيط العمودي (تغيير المحور الرئيسي)
css .container-column { display: flex; flex-direction: column; height: 300px; } /* العناصر 1، 2، 3 مرتبة عمودياً */
نصيحة: عندما تغير flex-direction إلى column ، يصبح المحور الرئيسي عمودياً والمحور المتقاطع أفقياً. هذا يعني أن الخصائص التي تتحكم في المحور الرئيسي (مثل justify-content) ستتحكم الآن في المحاذاة الرأسية، وخصائص المحور المتقاطع (مثل align-items) ستتحكم في المحاذاة الأفقية.