CSS

CSS Flex Flow
خاصية flex-flow في لغة CSS

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

التاريخ

06 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

828

المواضيع

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

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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات