CSS Flex Flow
خاصية flex-flow في لغة CSS
سوف تتعلم في هذا الدرس خاصية flex-flow في لغة CSS ووظيفيتها وكيفية إستخدامها مع حاويات flex box وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Flex Flow
خاصية flex-flow في لغة CSS
</>
CSS Flex Flow
خاصية flex-flow في لغة CSS
خاصية flex-flow تستخدم لأختصار خاصيتين flex-direction و flex-wrap في خاصية واحدة وتكتب قيم الخاصيتين في هذة الخاصية في لغة CSS.
قيم خاصية flex-wrap في لغة CSS:
- flex-direction flex-wrap قيمة خاصية flex-direction وقيمة خاصية flex-wrap.
CSS flex-flow syntax
طريقة كتابة خاصية flex-flow في لغة CSS.
flex-flow:value value;
CSS flex-flow values
قيم خاصية flex-flow في لغة CSS.
flex-flow:flex-direction flex-wrap|initial|inherit;
CSS flex-flow row and column values
قيم row و column لخاصية flex-flow في لغة CSS.
flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse;
CSS flex-flow row and column values
قيم row و column لخاصية flex-flow في لغة CSS.
flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse;
CSS flex-flow wrap values
قيم wrap خاصية flex-flow في لغة CSS.
flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse;
CSS flex-flow global values
قيم global لخاصية flex-flow في لغة CSS.
flex-flow: inherit; flex-flow: initial; flex-flow: revert; flex-flow: revert-layer; flex-flow: unset;
</>
CSS Flex Flow row wrap
خاصية flex-flow مع القيمة row wrap في لغة CSS
تستخدم خاصية flex-flow مع القيمة row wrap في لغة CSS لعرض العناصر بداخل flex container حاوية فليكس بوكس علي هيئة صف مع خاصية الألتفاف أو التمدد لصفوف أخري.
CSS Flex Flow row wrap
خاصية flex-flow مع القيمة row wrap في لغة CSS.
.flex-container
{
display: flex;
flex-flow:row wrap;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
}
</>
CSS Flex Flow row nowrap
خاصية flex-flow مع القيمة row nowrap في لغة CSS
تستخدم خاصية flex-flow مع القيمة row nowrap في لغة CSS لعرض العناصر بداخل flex container حاوية فليكس بوكس علي هيئة صف مع عدم الألتفاف أو التمدد لصفوف أخري.
CSS Flex Flow row nowrap
خاصية flex-flow مع القيمة row nowrap في لغة CSS.
.flex-container
{
display: flex;
flex-flow:row nowrap;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
}
</>
CSS Flex Flow row reverse nowrap
خاصية flex-flow مع القيمة row reverse nowrap في لغة CSS
تستخدم خاصية flex-flow مع القيمة row reverse nowrap في لغة CSS لعرض العناصر بداخل flex container حاوية فليكس بوكس علي هيئة صف عكسي مع عدم الألتفاف أو التمدد لصفوف أخري.
CSS Flex Flow row reverse nowrap
خاصية flex-flow مع القيمة row nowrap في لغة CSS.
.flex-container
{
display: flex;
flex-flow:row-reverse nowrap;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
}
</>
CSS Flex Flow row reverse wrap
خاصية flex-flow مع القيمة row-reverse wrap في لغة CSS
تستخدم خاصية flex-flow مع القيمة row-reverse wrap في لغة CSS لعرض العناصر بداخل flex container حاوية فليكس بوكس علي هيئة صف عكسي مع خاصية الألتفاف أو التمدد لصفوف أخري.
CSS Flex Flow row reverse wrap
خاصية flex-flow مع القيمة row-reverse wrap في لغة CSS.
.flex-container
{
display: flex;
flex-flow:row-reverse wrap;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
}
</>
CSS Flex Flow column wrap
خاصية flex-flow مع القيمة column wrap في لغة CSS
تستخدم خاصية flex-flow مع القيمة row nowrap في لغة CSS لعرض العناصر بداخل flex container حاوية فليكس بوكس علي هيئة عمود مع عدم الألتفاف أو التمدد لصفوف أخري.
CSS Flex Flow column wrap
خاصية flex-flow مع القيمة column wrap في لغة CSS.
.flex-container
{
display: flex;
flex-flow:column wrap;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
}
</>
CSS Flex Flow column nowrap
خاصية flex-flow مع القيمة column nowrap في لغة CSS
تستخدم خاصية flex-flow مع القيمة row nowrap في لغة CSS لعرض العناصر بداخل flex container حاوية فليكس بوكس علي هيئة عمود مع عدم الألتفاف أو التمدد لصفوف أخري.
CSS Flex Flow column nowrap
خاصية flex-flow مع القيمة column nowrap في لغة CSS.
.flex-container
{
display: flex;
flex-flow:column nowrap;
background-color: DodgerBlue;
border:orange dashed 2px;
width:100%;
height:200px;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
