CSS

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

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

التاريخ

05 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1496

المواضيع

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

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
عدد التقييمات