row هي الوضع الأفتراضي لعرض العناصر داخل flex container علي هيئة صف أفقي.
column لعرض العناصر داخل flex container علي بشكل عمودي رأسي.
row-reverse لعرض العناصر داخل flex container علي هيئة صف أفقي ولكن عكسي.
column-reverse لعرض العناصر داخل flex container علي بشكل عمودي رأسي ولكن عكسي.

CSS flex-direction syntax

طريقة كتابة خاصية flex-direction في لغة CSS.

flex-direction:value;

CSS flex-direction values

قيم خاصية flex-direction في لغة CSS.

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

</> CSS flex direction row
خاصية flex-direction مع القيمة row في لغة CSS

تستخدم خاصية flex-direction مع القيمة row لعرض flex items بشكل افقي من اليسار لليمين وهو الوضع الأفتراضي في لغة CSS.

جربها بنفسك

CSS flex direction row

خاصية flex-direction مع القيمة row في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}

جربها بنفسك

</> CSS flex direction row reverse
خاصية flex-direction مع القيمة row reverse في لغة CSS

ال flex-direction:row-reverse property تستخدم لعرض ال flex items بشكل افقي من اليمين لليسار.

جربها بنفسك

CSS flex direction row reverse

خاصية flex-direction مع القيمة row reverse في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row-reverse;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}

جربها بنفسك

</> CSS flex direction column
خاصية flex-direction مع القيمة column في لغة CSS

تستخدم خاصية flex-direction مع القيمة column لعرض flex items بشكل عمودي رأسي من أعلي لأسفل في لغة CSS.

جربها بنفسك

CSS flex direction column

خاصية flex-direction مع القيمة column في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:column;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}

جربها بنفسك

</> CSS flex direction column reverse
خاصية flex-direction مع القيمة column-reverse في لغة CSS

تستخدم خاصية flex-direction مع القيمة column-reverse لعرض flex items بشكل عمودي رأسي عكسي من أسفل لأعلي في لغة CSS.

جربها بنفسك

CSS flex direction column reverse

خاصية flex-direction مع القيمة column-reverse في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:column-reverse;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Flex Direction
خاصية flex-direction في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Flex Direction CSS