• علامه "+": تاخذ المن واحد فقط الي بعده على طول
  مع اتباع القوانين التاليه:
  1. ان يكونو في نفس المكان
  2. ان يكونو فوق بعض
• علامه "~" :وهي تاخذ كل الامنت المشابه الي في نفس المكان
  مع اتباع القوانين التاليه:
  1. يموني في نفس المكان

1. يوضع الاتربيوت داخل [] ويضاف له التسيقات
2. يوضع قبل العامه الاتربيوت الالمنت للتديد اكثر
3. الاتربيوت مع نوعه [attr='value']
4. العنصر مع اتربيوته بنوعهelement[attr='value']
5. الولصول من خلال اول الفاليو [attr ^='value']
6. الوصول من خلال نهايه الفاليو [attr $='value'
7. الوصول من خلال كلمه موجوده داخل الفاليو المهم تكون موجوده ولا يهم موقعها [attr *='value']
8. الوصول من خلال كلمه مفصول ب سبيس مسافه [attr ~='value']
9. يمكننا استخدام وسم ينفع مع كل شي ووضيفته الغا حساسيح الحروق [attr ='value' i]

1. transform: translate(x,y); الاكس يمين الواي فوق
2. transform: translateX(x); يمين فقط
3. transform: translateY(y); تحت فقط
4. transform: translate(-x,-y); الاكس يسار الواي فوق
5. transform: translateX(-x); يسار فقط
6. transform: translateY(-y); فوق فقط
7. transform: scale(x); وما تحت الصفر ب النقطه يصغىحجم الالمنت والاكس يمثل العض والقيمه الموجبه تكبره
8. transform: scaleY(y); نفس الكلام ينطبق على الطول
9. transform: scale(x); ينقلب العنصر
10. transform: scale(-x); ينقلب العنصر من اتجاه الاكس
11. transform: scaleY(-y); ينقلب العنصر م اتجاه الواي
12. transform: rotate(); يدور العنصر
13. transform: rotateX(); يدور من محوس الاكس فقط
14. transform: rotateY(); يدور من محور الواي فقط
15. transform: skew(); النحراف واذا كتبت قيمه احده يعني اكس والواي صفر اذا ما انكتبت
16. transform: skew(x,y); تتحكم في الانحراف من الحورين اكس وواي
17. transform: skewX(); التحكم من محور اكس فقط
18. transform: skewY(); التحكم من محور واي فقط
19. transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); اختصار بعض ما كتبناه

1. transition: duration; زمن الحركه
2. transition: element duration; زمن الحركه مع الخاصيه
3. transition: element duration, element duration, element duration; تخصيص كل خاصيه لحالها
4. transition: element duration ;
5. transition: element duration transition-timing-function; وهلها عده اشكال
   • ease تبدا بسرعه بطيه وتتوسط بسرع سريعه والاخيره بطيئه
   • ease-in يبدا بسرعه بطيئه وينتهي بسرعه عاديه
   • ease-out تبدا بسرعه عاديه وتنتهي بسرعه بطيئه
   • ease-in-out تبدا بسرعه بطيه وتتوسط بسرعه عاديه وتنتهي بسرعه بطيئه
   • Linear سرعه ثابكه وهي العاديه
   • step(s) تمشي على خطوات ونضع عدد الخطوات مكان الاس
   • step-end ينتضر الوقت وبعدها يمشي خطوه
   • step-start يمشي خطوه قبل كل شي
6. transition: element duration transition-timing-function delay; اخر صفه وهي التاخير حط مده ما يتنفذ الي قبلها كل الا بعد هاذا المده
7. transition-property: ; خاصيه انو يشتغل على اي خاصيه
8. transition-duration: ; خاصيه الزمن فقط
9. transition-timing-function: ; خاصيه نوع الحركه فقط
10. transition-delay: ; خاصيه التاخير فقط

1. display: flex; تجي العناصر بشكل عرضي عباره عن صف
2. display: block; العناصر فوق بعض وهو العادي
3. display: inlin-flex; يكون محيط الاب على حجم عناصره
ملاحضه مهمه لازم يتواجد الفلكس عشان يشتغل كل الي جاي

1. flex-direction: row; اتجاه صفحتك
2. flex-direction: row-reverse; عكس اتجاه صفحتك
3. flex-direction: column; ugn شكل عمود
4. flex-direction: column-reverse; عمود معكوس

1. flex-wrap: wrap; اذا قل العرض تنزل لتحت
2. flex-wrap: wrap-reverse;
3. flex-wrap: nowrap; ما تنزل العناصر وتختفي

• اذا كان الفلكس دايكرشن رو يعني العناصر بشكل صفوف على نفس الصف تتحكم على محور الاكس ولها عده قيم وهي
  1. justify-content: flex-start; بدايه المحور اكس على حسب اتججاه الموقع
  2. justify-content: flex-end; نهايه المحور اكس ويكون عكس الاتجاه
  3. justify-content: center; وسط المحور
  4. justify-content: space-betweeen; تحط مسافه بين العناصر
  5. justify-content: space-around; مسافات حولين العناصر
  6. justify-content: apace-evenly; يوزوع المسافات ب التساوي
• اذا كان الفلكس دايركشن كولون يعني العناصر بشكل عمودي بتتحكم في محور الواي ولها عده قيم وهي
  1. justify-content: flex-start; بدايه محور الواي فوق يعني
  2. justify-content: fles-end; نهاية محور واي يعني اسفل
  3. justify-content: center; وسط محور واي
  4. justify-content: space-betweeen; تحط مسافه بين العناصر
  5. justify-content: space-around; مسافات حولين العناصر
  6. justify-content: apace-evenly; يوزوع المسافات ب التساوي

• اذا كان الفلكس دايكرشن رو يعني العناصر بشكل صفوف على نفس الصف تتحكم على محور الواي ولها عده قيم وهي
  1. align-items: stretch; القيمه الافتراضيه لها وتتمدد العناصر على حجم الاب
  2. align-items: flex-start; تكون في بدايه محور الواي فوق
  3. justify-content: center; في وسط محور الواي
  4. align-items: flex-end; في نهايه محور الواي اي تحت
• اذا كان الفلكس دايركشن كولون يعني العناصر بشكل عمودي بتتحكم في محور الاكس ولها عده قيم وهي
  1. align-items: stretch; القيمه الافتراضيه لها وتتمدد العناصر على حجم الاب
  2. align-items: flex-start; تكون في بدايه محور الاكس على حسب اتجاه الصفحه
  3. align-items: center; في وسط محور الاكس
  4. align-items: flex-end; في نهايه محور الاكس على حسب اتجاه الصفحه

• اذا كان الفلكس دايكرشن رو يعني العناصر بشكل صفوف على نفس الصف تتحكم على محور الواي ولها عده قيم وهي
  1. align-content: stretch; القيمه الافتراضيه لها وتتمدد العناصر على حجم الاب
  2. align-content: flex-start; تكون في بدايه محور الواي فوق
  3. align-content: center; في وسط محور الواي
  4. align-content: flex-end; في نهايه محور الواي اي تحت
• اذا كان الفلكس دايركشن كولون يعني العناصر بشكل عمودي بتتحكم في محور الاكس ولها عده قيم وهي
  1. align-content: stretch; القيمه الافتراضيه لها وتتمدد العناصر على حجم الاب
  2. align-content: flex-start; تكون في بدايه محور الاكس على حسب اتجاه الصفحه
  3. align-content: center; في وسط محور الاكس
  4. align-content: flex-end; في نهايه محور الاكس على حسب اتجاه الصفحه

1. align-self: flex-start; بدايه المحور حق الواي اي فوق
2. align-self: flex-end; نهايه المحور حق الواي اي تحت
3. align-self: center; وسط المحور حق الواي يعني في الوسط
4. align-self: stretch; الافتراضي يمتد

• grid-template-columns: repert(n, s); تستخدم لتككرار الاعمده مع مساحه معينه الان تمثل عدد الاعمده الاس حجم كل واحد منها
• grid-template-columns: 1fr 1fr; لانشا عمودين بحجم متساوي
• grid-template-columns: auto auto auto; يمكن أيضًا تحديد ارتفاع الاعمده باستخدام قيمة اوتو وهذا يعني أن ارتفاع العمود يتم تعيينه بشكل تلقائي بناءً على حجم محتوى العنصر الموجود في الصف.
• grid-template-columns: minmax(i, x); الاي هو اقل حجم لللصف والاكس اكبر حجم له واذا استخدمنا اوتو سيكون على حجم المحتوى الي فيه
• grid-template-columns: repert(auto-fill, s);الاس حجم كل صف والاوت فيل عدد الاعمده على حجم العرض
• grid-template-columns: ;

• grid-template-rwos: repert(n, s) تستخدم لتككرار الصفوف مع مساحه معينه الان تمثل عدد الاعمده الاس حجم كل واحد منها;
• grid-template-rwos: 1fr 1fr; لانشا صفين بحجم متساوي
• grid-template-rwos: auto auto auto; يمكن أيضًا تحديد ارتفاع الصفوف باستخدام قيمة اوتو وهذا يعني أن ارتفاع الصف يتم تعيينه بشكل تلقائي بناءً على حجم محتوى العنصر الموجود في الصف.
• grid-template-rwos: minmax(i, x); الاي هو اقل حجم لللصف والاكس اكبر حجم له واذا استخدمنا اوتو سيكون على حجم المحتوى الي فيه
• grid-template-rwos: ;
• grid-template-rwos: ;

1. row-gap: 0px; مسافه بين كل الصفوف
2. column-gap: 0px; مسافه بين كل همود
3. gap:row-gap column-gap; الاختصار اول قيمه الصفوف والثانيه الاعمده
4. gap: 0px; القيمه تكون بين الصفوف والاعمده معا

• grid-column-start: 0px; مناي لاين يبدا من الي جمبه
• grid-column-end: 0px; وين ينتهي
• grid-column: start/end; اختصار للي فوق
• grid-column-end: -1; نستطيع استخدام سالب واحد للوصول الى اخر لاين وتستخدم اذا كنت لا عرف عددها

• grid-row-start: 0px; من اي لاين يبدا من الي جمبه
• grid-row-end: 0px; وين ينتهي
• grid-row: start/end; اختصار للي فوق
• grid-row-end: -1; نستطيع استخدام سالب واحد للوصول الى اخر لاين وتستخدم اذا كنت لا عرف عددها

                        pro{
                           grid-template-areas:                         | حرف الايه تمثل العمود الي فيه العنصر 
                           " a1 a2 a3"  تمثل صف واحد                   |
                           " a1 a2 a3"  تمثل صف ثاني                   |
                           " a1 a2 a3"  تمثل صف ثالث                   | 
                           ; 
                        }