CSS

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

سوف تتعلم في هذا الدرس خاصية flex-direction التي تتحكم في إتجاه العناصر الداخلية لحاوية flex box وجميع القيم الخاصة بها في لغة CSS.

التاريخ

06 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1039

المواضيع

24
الشروحات chevron_left CSS Flex Direction chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> CSS flex direction
خاصية flex-direction في لغة CSS

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


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

  • 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%;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.