ساحة تجارب CSS Flexbox

تعلّم وجرّب CSS Flexbox عملياً. اضبط خصائص الحاوية وشاهد تحديث التخطيط مباشرة. أداة تعليمية مثالية لفهم سلوك Flexbox.

CSS 

  




  


  
  

  
  
  
  

    
الميزات

    

      
      

        
        Container properties panel
      

      
      

        
        Add/remove items
      

      
      

        
        Individual item controls
      

      
      

        
        Live layout preview
      

      
      

        
        Generate CSS code
      

      
    

  

  

  
  

    
طريقة الاستخدام

    

      
        
        
1. اضبط خصائص الحاوية (الاتجاه، الالتفاف، justify-content، align-items).

        
        
2. أضف عناصر أو أزلها.

        
        
3. شاهد تحديث التخطيط مباشرة وانسخ شفرة CSS.

        
      
    

  


  
  
  
  

    
الأسئلة الشائعة

    
    

      What is Flexbox?
      
CSS Flexbox is a one-dimensional layout method for arranging items in rows or columns with flexible sizing.

    

    
  

  

  
  
  

    
أدوات ذات صلة

    

      
      
        

          
        

        
مولّد ظل CSS

        
أنشئ خاصية box-shadow في CSS بصرياً باستخدام أشرطة التمرير. شاهد معاينة مباشرة و...

      
      
      
        

          
        

        
مولّد تدرجات CSS

        
أنشئ تدرجات CSS خطية وشعاعية ومخروطية بصرياً. أضف نقاط توقف ألوان متعددة وانسخ ش...

      
      
      
        

          
        

        
مولّد حواف CSS المستديرة

        
صمّم خاصية border-radius في CSS بصرياً — تحكم في الزوايا الأربع فردياً أو معاً. ...

      
      
      
        

          
        

        
مولّد CSS Grid

        
أنشئ تخطيطات CSS Grid بصرياً. حدد الصفوف والأعمدة والفجوات وانسخ شفرة CSS وHTML ...