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

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

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

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

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.

HTML 
flex-wrap:value;

CSS flex-wrap values

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

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

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

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

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

مشاركة

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

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