CSS Flexbox-песочница

Изучайте и экспериментируйте с CSS Flexbox. Настраивайте свойства контейнера и наблюдайте за обновлением макета в реальном времени. Идеальный инструмент для изучения и прототипирования flex-разметки.

CSS 

  




  


  
  

  
  
  
  

    
Возможности

    

      
      

        
        Container properties panel
      

      
      

        
        Add/remove items
      

      
      

        
        Individual item controls
      

      
      

        
        Live layout preview
      

      
      

        
        Generate CSS code
      

      
    

  

  

  
  

    
Как использовать

    

      
        
        
1. Настройте свойства контейнера (direction, wrap, justify-content, align-items).

        
        
2. Добавляйте или удаляйте flex-элементы.

        
        
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-свойство box-shadow с помощью ползунков. Просматривайте...

      
      
      
        

          
        

        
Генератор CSS-градиентов

        
Создавайте линейные, радиальные и конические CSS-градиенты визуально. Добавляйте...

      
      
      
        

          
        

        
Генератор CSS border-radius

        
Визуально настройте CSS border-radius — управляйте всеми четырьмя углами по отде...

      
      
      
        

          
        

        
Генератор CSS Grid

        
Визуально создавайте CSS Grid-макеты. Задайте строки, столбцы, отступы и скопиру...