CSS Flex Wrap
إلتفاف العناصر داخل حاوية flex box في لغة CSS
سوف تتعلم في هذا الدرس خاصية flex-wrap في لغة CSS ووظيفيتها وكيفية إستخدامها مع حاويات flex box وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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%;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
