CSS

CSS Flex Wrap
إلتفاف العناصر داخل حاوية flex box في لغة CSS

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

التاريخ

05 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1202

المواضيع

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

CSS Flex Wrap Container
إلتفاف العناصر داخل حاوية flex box في لغة CSS

</> CSS Flex Wrap
إلتفاف العناصر داخل حاوية flex box في لغة CSS

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


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

  • nowrap هي القيمة الأفتراضية وتحدد أن العناصر الداخلية لحاوية flex box لا تتمدد لصفوف جديدة إذا لم يكن لها مساحة.
  • wrap تحدد أن العناصر الداخلية لحاوية flex box تتمدد لصفوف جديدة إذا لم يكن لها مساحة.
  • wrap-reverse تحدد أن العناصر الداخلية لحاوية flex box تتمدد لصفوف جديدة إذا لم يكن لها مساحة إذا تطلب الأمر ذلك وبطريقة عكسية.
CSS flex-wrap syntax

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

flex-wrap:value;
CSS flex-wrap values

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

flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;

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

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

CSS flex wrap nowrap

خاصية flex-wrap مع القيمة nowrap في لغة CSS.

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

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

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

CSS flex wrap wrap

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

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

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

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

CSS flex wrap wrap reverse

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

.flex-container
{
  display: flex;
  flex-wrap:wrap-reverse;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:100%;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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