انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 72
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,460
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

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.

HTML 
flex-direction:value;

CSS flex-direction values

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

HTML 
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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.flex-container
{
  display: flex;
  flex-direction:column-reverse;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…