خصائص flex-direction لـ CSS

التعريف والاستخدام

يحدد خاصية flex-direction اتجاه العناصر المرونة.

التعليقات:إذا لم يكن العنصر برنامج مرونة، فإن خاصية flex غير صالحة.

انظر أيضًا:

دليل CSS:صندوق مرن CSS

دليل CSS:خصائص flex

دليل CSS:خصائص flex-basis

دليل CSS:خصائص flex-flow

دليل CSS:خصائص flex-grow

دليل CSS:خصائص flex-shrink

دليل CSS:خصائص flex-wrap

دليل HTML DOM:خصائص flexDirection

مثال

ضبط اتجاه العناصر الإليكترونية داخل علامة <div> باتجاه معاكس:

div {
  display: flex;
  flex-direction: row-reverse; 
}

تجربة شخصية

اللغة CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

قيمة الخاصية

القيمة الوصف
row القيمة الافتراضية. عرض العناصر الإليكترونية كصف.
row-reverse مثل الصفوف، لكن باتجاه معاكس.
column عرض العناصر الإليكترونية بشكل عمودي.
column-reverse مثل الأعمدة، لكن باتجاه معاكس.
initial ضع هذه الخاصية على قيمتها الافتراضية. انظر إلى: initial.
inherit ورث هذه الخاصية من العنصر الأم. انظر إلى: inherit.

تفاصيل تقنية

القيمة الافتراضية: row
الوراثة: لا
تحريك: غير مدعوم. انظر إلى:خصائص تحريك.
الإصدار: CSS3
جافا سكريبت: object.style.flexDirection="column-reverse"

مزيد من الأمثلة

استخدام flex-direction واستعلامات وسائط لإنشاء ترتيبات مختلفة للشاشات/الأجهزة المختلفة:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* تصميم ردائي - إنشاء ترتيب عمودي (100%) بدلاً من ترتيب أفقي (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

تجربة شخصية

دعم المتصفح

رقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية بشكل كامل.

رقم -webkit- أو -moz- يشير إلى الإصدار الأول الذي يستخدم المقدمة.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0