Flex Box

wedding css game

لعبة wedding هي لعبة بسيطة لاختبار مستواك في flex box
الهدف من هذه اللعبة هو فهم خاصية flex box css فمن خلال حل مجموعة الالغاز التالية و مساعدة الازواج بالرجوع لبعض بالطريقة الصحيحة من خلال كتابة اكواد css ف هذا ينمي فهمك بشكل كبير لتلك الخاصية

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 

              
              

            

            
          

          


        

                  

                      

                      

                      

                      

                  

        

      


      



      

        

          
          
          
Language

          
        

  
        

          
Level

          

            
              
            
            
              Level
              1
              of
              1
              ▾
            
            
              
            
            

              

              
Reset

            

          

        



        

          
          
Difficulty

          

            

              
              
            
              
              
            
              
              
              

            

          
                
        

  
        

       
      


        


    
          

      

  
    
  
    
    

   



    
    
    
    
    
    
    
    

    

    
    
    




كيف تلعب wedding flex box













جرب بنفسك كل خاصية في flex box





            

                

                    
Flex Parents

                    
اختبر بنفسك القيم التي يتم وضعها للآباء في flex 

                    

                        
Display Flex

                        
اختار ما بين flex او block

                        
value: flex

                        

                            
                            
                            
                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    
   
                    

                        
flex-direction

                        
يجب اختيار القيم التي يتم وضعها لل flex-direction

                        
value: row

                        

                            
                            
                            
                            
                            
                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                    

                        
flex-wrap

                        
يجب اختيار القيم التي يتم وضعها لل flex-wrap

                        
value: nowrap

                        

                            
                            
                            
                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                    

                        
align-items

                        
يجب اختيار القيم التي يتم وضعها لل align-items

                        
value: stretch

                        

                            
                            
                            
                            
                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                    

                        
justify-content

                        
يجب اختيار القيم التي يتم وضعها لل justfy-content

                        
value: start

                        

                            
                                         
                            
                            
                            
                            
                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                

        
                

                    
Flex Items

                    
اختبر بنفسك القيم التي يتم وضعها للابناء في flex 

                    

                        
align-self

                        
يجب اختيار القيم التي يتم وضعها لل align-self

                        
value: stretch

                        

                            
                            
                            
                            
                        

                        

                            
1

                            
2

                            
align-self

                            
3

                            
4

       
                        

                    

                    

                        
flex-grow

                        
ضع قيم رقمية فقط لل flex-grow

                        

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                    

                        
flex-shrink

                        
ضع قيم رقمية فقط لل flex-shrink

                        

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                    

                        
flex-basis

                        
ملحوظة قيمة ال flex-basis هنا بال px بمعنى انك لو كتبت 100 في هي تساوي 100px

                        

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                    

                        
order

                        
رتب العناصر التي امامك بناء على قيمة ال order التي ستعطيها لكل واحد منهم

                        

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                            

                                
                                
                            

                        

                        

                            
1

                            
2

                            
3

                            
4

                        

                    

                

            

            




CSS Flexbox Layout Module





يُعد CSS Flexbox أحد أدوات تصميم الويب الحديثة التي تستخدم لتحقيق ترتيب أفضل للعناصر داخل صفحة الويب. يعمل تقريبًا على تحسين تنسيق العناصر على الشاشة وتوزيعها بطريقة أكثر سهولة ومرونة.










ماذا كنا نستخدم قبل Flexbox





  • Block تستخدم لوضع للاقسام في موقعك
  •  Inline تستخدم للنصوص
  •  table تستخدم اذا اردت وضع البيانات في اكثر من عمود
  •  Positioned للتحكم في موضع اي عنصر





ما هي css flex-box





خاصية flex-box في CSS تستخدم لتحديد توزيع العناصر داخل العنصر الأب، وتمكن المصممين من إنشاء تصاميم مرنة ومتجاوبة وتحقيق توزيع شامل ودقيق للعناصر.





تعمل خاصية flex-box بتحويل العنصر الأب إلى عنصر مرن يحتوي على عناصر داخلية، وتمكن المصممين من تحديد توزيع العناصر داخل العنصر الأب بشكل دقيق ومرن.





تتضمن خاصية flex-box العديد من الخصائص، بما في ذلك:





  • display: flex;: يحول العنصر الأب إلى عنصر مرن.
  • flex-direction: row/column;: تحدد اتجاه توزيع العناصر داخل العنصر الأب، سواء أفقياً أو عمودياً.
  • justify-content: center/flex-start/flex-end/space-between/space-around;: يحدد توزيع العناصر في المساحة الأفقية أو العمودية، وتسمح بتحديد مسافات متساوية بين العناصر.
  • align-items: center/flex-start/flex-end/stretch/baseline;: تحدد توزيع العناصر في المساحة العمودية، وتسمح بتحديد مسافات متساوية بين العناصر.





  • flex-wrap: wrap/nowrap;: يحدد ما إذا كانت العناصر تلتف على عدة أسطر أو تبقى على سطر واحد.
  • flex-grow: number;: تحدد مساحة العنصر الفارغة التي يمكن للعناصر الأخرى الانتشار فيها.
  • flex-shrink: number;: يحدد القدرة على تصغير حجم العناصر بهدف الاحتفاظ بالمساحة الكلية.
  • flex-basis: length;: يحدد حجم العنصر الأساسي قبل توزيع المساحة الزائدة.





وإليك بعض الأمثلة على استخدام flex-box في CSS:





/* تحديد اتجاه توزيع العناصر */
display: flex;
flex-direction: row;

/* تحديد توزيع العناصر في المساحة الأفقية */
justify-content: space-between;

/* تحديد توزيع العناصر في المساحة العمودية */
align-items: center;

/* تحديد ما إذا كانت العناصر تلتف على عدة أسطر */
flex-wrap: wrap;

/* تحديد مساحة العنصر الفارغة التي يمكن للعناصر الأخرى الانتشار فيها */
flex-grow: 1;






يمكن استخدام خاصية flex-box مع العناصر المختلفة في HTML، مثل النص والصور والأشكال والفيديو وغيرها، لتحديد توزيعها وتحقيق التأثيرات المرغوبة. يمكن دمج عدة















الفرق بين display:flex و بين display:block





خاصية display: flex وdisplay: block في CSS تستخدمان لتحديد كيفية عرض العناصر في الصفحة، ولكنهما تختلفان في طريقة تعاملهما مع توزيع العناصر داخل العنصر الأب.





  • display: block: تجعل العنصر يشغل المساحة الكاملة المتاحة في العرض، ويتم عرض العناصر بشكل عمودي، أي أن كل عنصر يظهر في سطر واحد تحت الآخر.
  • display: flex: تحول العنصر الأب إلى عنصر مرن (flex container) يحتوي على عناصر داخلية (flex items)، ويتم توزيع هذه العناصر بشكل مرن ومتجاوب.





يمكن استخدام display: block لعرض العناصر في سطر واحد تحت الآخر، والتحكم في العناصر بسهولة باستخدام خصائص أخرى مثل width, height, margin, و padding. ومن الممكن أيضًا تعطيل خاصية float الافتراضية للعناصر باستخدام display: block.





بالمقابل، يمكن استخدام display: flex لتحقيق توزيع مرن ومتجاوب للعناصر داخل العنصر الأب، وتحديد مسافات متساوية بين العناصر وتحديد اتجاه التوزيع والمسافات بين العناصر بشكل دقيق. يمكن استخدام خاصية flex مع العناصر الداخلية لتحديد توزيعها بشكل مرن ومتجاوب فيما بينها.





وإليك بعض الأمثلة للتوضيح:





/* استخدام display: block */
.container {
  display: block;
}

.item {
  width: 100%;
  margin-bottom: 10px;
}

/* استخدام display: flex */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  margin-right: 10px;
}






في هذا المثال، يتم استخدام display: block لعرض العناصر في سطر واحد تحت الآخر، ويتم استخدام display: flex لتحقيق توزيع مرن ومتجاوب للعناصر داخل العنصر الأب، وتحديد مسافات متساوية بين العناصر وتحديد اتجاه التوزيع والمسافات بين العناصر بشكل دقيق.





شرح خاصية flex-direction





خاصية flex-direction هي خاصية في CSS تحدد اتجاه توزيع العناصر داخل العنصر الأب الذي لديه خاصية display: flex. يمكن استخدام flex-direction لتحديد اتجاه توزيع العناصر سواء أفقيًا أو عموديًا.





تتضمن القيم الأربعة الممكنة لخاصية flex-direction هي:





  • row: يتم توزيع العناصر في اتجاه أفقي من اليسار إلى اليمين. هذه هي القيمة الافتراضية.
  • row-reverse: يتم توزيع العناصر في اتجاه أفقي من اليمين إلى اليسار.
  • column: توزيع العناصر في اتجاه عمودي من الأعلى إلى الأسفل.
  • column-reverse: يتم توزيع العناصر في اتجاه عمودي من الأسفل إلى الأعلى.





يمكن تحديد خاصية flex-direction باستخدام CSS، على سبيل المثال:





/* توزيع العناصر في اتجاه أفقي من اليسار إلى اليمين */
.container {
  display: flex;
  flex-direction: row;
}

/* توزيع العناصر في اتجاه أفقي من اليمين إلى اليسار */
.container {
  display: flex;
  flex-direction: row-reverse;
}

/* توزيع العناصر في اتجاه عمودي من الأعلى إلى الأسفل */
.container {
  display: flex;
  flex-direction: column;
}

/* توزيع العناصر في اتجاه عمودي من الأسفل إلى الأعلى */
.container {
  display: flex;
  flex-direction: column-reverse;
}






تستخدم خاصية flex-direction عادة لتغيير اتجاه توزيع العناصر داخل العنصر الأب، وذلك لتحسين تصميم المواقع وتحسين تجربة المستخدم.





شرح خاصية flex-wrap





خاصية flex-wrap هي خاصية في CSS تحدد ما إذا كان يجب للعناصر الداخلية في العنصر الأب الذي لديه خاصية display: flex أن تلتف على أكثر من سطر أم يجب أن تظل على سطر واحد. تستخدم هذه الخاصية للتحكم في توزيع العناصر على الشاشة وتحسين تجربة المستخدم في حالة وجود عناصر كثيرة.





تتضمن القيم الثلاثة الممكنة لخاصية flex-wrap هي:





  • nowrap: يجب على العناصر الداخلية البقاء على سطر واحد وعدم اللف.
  • wrap: على العناصر الداخلية اللف على عدة أسطر إذا تجاوزت المساحة المتاحة.
  • wrap-reverse: يجب على العناصر الداخلية اللف على عدة أسطر إذا تجاوزت المساحة المتاحة، ولكن بالترتيب العكسي.





يمكن تحديد خاصية flex-wrap باستخدام CSS، على سبيل المثال:





/* يجب على العناصر الداخلية البقاء على سطر واحد */
.container {
  display: flex;
  flex-wrap: nowrap;
}

/* يجب على العناصر الداخلية اللف على عدة أسطر */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* يجب على العناصر الداخلية اللف على عدة أسطر بالترتيب العكسي */
.container {
  display: flex;
  flex-wrap: wrap-reverse;
}






تستخدم خاصية flex-wrap عادة لتحسين تصميم المواقع وتحسين تجربة المستخدم عند وجود عدد كبير من العناصر الداخلية في العنصر الأب. ويمكن استخدامها بشكل مشترك مع خاصية flex-direction لتحقيق توزيع مثالي للعناصر.





شرح خاصية align-items





خاصية align-items هي خاصية في CSS تحدد توزيع العناصر داخل العنصر الأب الذي لديه خاصية display: flex في المساحة العمودية. تستخدم هذه الخاصية لتحديد موضع العناصر داخل العنصر الأب بشكل دقيق.





تتضمن القيم الخمسة الممكنة لخاصية align-items هي:





  • stretch: تمدد العناصر لملء المساحة المتاحة عمودياً (هذه القيمة الافتراضية).
  • flex-start: تحديد موضع العناصر بالأعلى من المساحة المتاحة.
  • flex-end: يحدد موضع العناصر بالأسفل من المساحة المتاحة.
  • center: تحديد موضع العناصر في المنتصف العمودي للمساحة المتاحة.
  • baseline: تحديد موضع العناصر بناءً على خط الأساس الخاص بالنص في العنصر الأب.





يمكن تحديد خاصية align-items باستخدام CSS، على سبيل المثال:





/* تحديد موضع العناصر بالأعلى من المساحة المتاحة */
.container {
  display: flex;
  align-items: flex-start;
}

/* تحديد موضع العناصر بالأسفل من المساحة المتاحة */
.container {
  display: flex;
  align-items: flex-end;
}

/* تحديد موضع العناصر في المنتصف العمودي للمساحة المتاحة */
.container {
  display: flex;
  align-items: center;
}

/* تحديد موضع العناصر بناءً على خط الأساس الخاص بالنص في العنصر الأب */
.container {
  display: flex;
  align-items: baseline;
}






تستخدم خاصية align-items عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد موضع العناصر بدقة. ويمكن استخدامها بشكل مشترك مع خاصية justify-content لتحقيق توزيع مثالي للعناصر.










شرح خاصية justify-content





خاصية justify-content هي خاصية في CSS تحدد توزيع العناصر داخل العنصر الأب الذي لديه خاصية display: flex في المساحة الأفقية. تستخدم هذه الخاصية لتحديد موضع العناصر داخل العنصر الأب بشكل دقيق.





تتضمن القيم الخمسة الممكنة لخاصية justify-content هي:





  • flex-start: تحديد موضع العناصر باليسار من المساحة المتاحة.
  • flex-end: يحدد موضع العناصر باليمين من المساحة المتاحة.
  • center: تحديد موضع العناصر في المنتصف الأفقي للمساحة المتاحة.
  • space-between: توزيع العناصر على المساحة المتاحة بمسافات متساوية بين العناصر.
  • space-around: توزيع العناصر على المساحة المتاحة بمسافات متساوية حول العناصر.





يمكن تحديد خاصية justify-content باستخدام CSS، على سبيل المثال:





/* تحديد موضع العناصر باليسار من المساحة المتاحة */
.container {
  display: flex;
  justify-content: flex-start;
}

/* تحديد موضع العناصر باليمين من المساحة المتاحة */
.container {
  display: flex;
  justify-content: flex-end;
}

/* تحديد موضع العناصر في المنتصف الأفقي للمساحة المتاحة */
.container {
  display: flex;
  justify-content: center;
}

/* توزيع العناصر على المساحة المتاحة بمسافات متساوية بين العناصر */
.container {
  display: flex;
  justify-content: space-between;
}

/* توزيع العناصر على المساحة المتاحة بمسافات متساوية حول العناصر */
.container {
  display: flex;
  justify-content: space-around;
}






تستخدم خاصية justify-content عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد موضع العناصر بدقة. ويمكن استخدامها بشكل مشترك مع خاصية align-items لتحقيق توزيع مثالي للعناصر.





شرح خاصية align-self





خاصية align-self هي خاصية في CSS تحدد توزيع عنصر محدد داخل العنصر الأب الذي لديه خاصية display: flex في المساحة العمودية. تستخدم هذه الخاصية لتحديد موضع عنصر محدد داخل العنصر الأب بشكل دقيق، بشكل مستقل عن توزيع باقي العناصر داخل العنصر الأب.





تتضمن القيم الخمسة الممكنة لخاصية align-self هي:





  • auto: تعتمد قيمة توزيع العنصر على قيمة align-items للعنصر الأب.
  • stretch: تمدد العنصر لملء المساحة المتاحة عمودياً (هذه القيمة الافتراضية).
  • flex-start: يحدد موضع العنصر بالأعلى من المساحة المتاحة.
  • flex-end: تحديد موضع العنصر بالأسفل من المساحة المتاحة.
  • center: يحدد موضع العنصر في المنتصف العمودي للمساحة المتاحة.
  • baseline: تحديد موضع العنصر بناءً على خط الأساس الخاص بالنص في العنصر الأب.





يمكن تحديد خاصية align-self باستخدام CSS، على سبيل المثال:





/* تحديد موضع العنصر بالأعلى من المساحة المتاحة */
.item {
  align-self: flex-start;
}

/* تحديد موضع العنصر بالأسفل من المساحة المتاحة */
.item {
  align-self: flex-end;
}

/* تحديد موضع العنصر في المنتصف العمودي للمساحة المتاحة */
.item {
  align-self: center;
}

/* تحديد موضع العنصر بناءً على خط الأساس الخاص بالنص في العنصر الأب */
.item {
  align-self: baseline;
}






تستخدم خاصية align-self عادة لتحسين توزيع عنصر محدد داخل العنصر الأب وتحديد موضعه بدقة، بشكل مستقل عن توزيع باقي العناصر داخل العنصر الأب. ويمكن استخدامها بشكل مشترك مع خاصية align-items لتحقيق توزيع مثالي للعناصر.





شرح خاصية flex-grow





خاصية flex-grow هي خاصية في CSS تحدد قدرة العنصر الفرعي على التوسع داخل العنصر الأب الذي لديه خاصية display: flex. تستخدم هذه الخاصية لتحديد نسبة توسع العنصر الفرعي مقارنة بالعناصر الفرعية الأخرى داخل العنصر الأب.





قيمة الخاصية flex-grow هي عدد غير سالب، وتعبر عن النسبة المئوية لتوسع العنصر الفرعي مقارنة بالعناصر الفرعية الأخرى داخل العنصر الأب. وإذا كانت قيمة flex-grow هي 0، فلن يوسع العنصر الفرعي داخل العنصر الأب.





يمكن تحديد خاصية flex-grow باستخدام CSS، على سبيل المثال:





/* تحديد توسع العنصر الفرعي بنسبة 2 مقارنة بالعناصر الفرعية الأخرى */
.item {
  flex-grow: 2;
}






تستخدم خاصية flex-grow عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد نسبة توسع العنصر الفرعي بدقة، بناءً على حجم العناصر الفرعية الأخرى داخل العنصر الأب. ويمكن استخدامها بشكل مشترك مع خاصية flex-shrink و flex-basis لتحقيق توزيع مثالي للعناصر.





شرح خاصية flex-basis





خاصية flex-basis هي خاصية في CSS تحدد حجم العنصر الفرعي داخل العنصر الأب الذي لديه خاصية display: flex. تستخدم هذه الخاصية لتحديد الحجم الأولي للعنصر الفرعي قبل تطبيق خاصية flex-grow و flex-shrink.





قيمة الخاصية flex-basis هي حجم العنصر الفرعي الأولي، ويمكن تحديد هذه القيمة بوحدات الطول مثل بكسل أو بالنسبة المئوية من عرض العنصر الأب. وإذا كانت قيمة flex-basis هي auto، فسيتم استخدام حجم العنصر الفرعي الأصلي كحجم أولي.





يمكن تحديد خاصية flex-basis باستخدام CSS، على سبيل المثال:





/* تحديد حجم العنصر الفرعي بعرض 200 بكسل */
.item {
  flex-basis: 200px;
}

/* تحديد حجم العنصر الفرعي بنسبة 50% من عرض العنصر الأب */
.item {
  flex-basis: 50%;
}

/* استخدام حجم العنصر الفرعي الأصلي كحجم أولي */
.item {
  flex-basis: auto;
}






تستخدم خاصية flex-basis عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد الحجم الأولي للعنصر الفرعي بدقة، قبل تطبيق خاصية flex-grow و flex-shrink. ويمكن استخدامها بشكل مشترك مع خاصية flex-grow و flex-shrink لتحقيق توزيع مثالي للعناصر.





شرح خاصية order





خاصية order هي خاصية في CSS تحدد ترتيب العنصر الفرعي داخل العنصر الأب الذي لديه خاصية display: flex. تستخدم هذه الخاصية لتحديد ترتيب العرض العمودي للعناصر الفرعية داخل العنصر الأب، دون الحاجة إلى تغيير ترتيب العناصر في الشفرة البرمجية.





قيمة الخاصية order هي رقم صحيح، وتعبر عن ترتيب العنصر الفرعي داخل العنصر الأب. ويتم عرض العناصر الفرعية في العنصر الأب وفقًا لترتيب الأرقام الصحيحة، حيث يتم عرض العنصر ذو الرقم الأقل أولاً، والعنصر ذو الرقم الأعلى ثانيًا، وهكذا.





يمكن تحديد خاصية order باستخدام CSS، على سبيل المثال:





/* تحديد ترتيب العنصر الفرعي الأول */
.item {
  order: 1;
}

/* تحديد ترتيب العنصر الفرعي الثاني */
.item {
  order: 2;
}

/* تحديد ترتيب العنصر الفرعي الثالث */
.item {
  order: 3;
}






تستخدم خاصية order عادة لتحسين ترتيب العرض العمودي للعناصر داخل العنصر الأب، دون الحاجة إلى تغيير ترتيب العناصر في الشفرة البرمجية. ويمكن استخدامها بشكل مشترك مع خصائص أخرى مثل flex-grow و flex-shrink و flex-basis لتحقيق توزيع مثالي للعناصر.










لو لقيت نفسك لسه مش فاهم تواصل معايا هنا












learn css