CSS Flexbox Playground

Visually adjust Flexbox properties, preview layouts in real-time, and generate CSS code.

Main Axis
Wrapping
Main Axis Align
Cross Axis Align
Multi-line Align
Preview Container
CSS Output 

                        

                    

                

            


            
            

            
        


        
        


            
How Flexbox Works
            

            

                Flexbox (Flexible Box Layout) is a one-dimensional CSS layout model designed to provide a more efficient
                way to lay out, align and distribute space among items in a container, even when their size is unknown
                and/or dynamic.
                


                Its core concepts include two axes: Main Axis and Cross Axis.
                flex-direction determines the direction of the main axis, while
                justify-content controls alignment along the main axis, and align-items
                controls alignment along the cross axis.
            


            
Properties Explained
            

            

                

                    
justify-content

                    
Defines how items are aligned along the main axis (usually
                        horizontal).

                    
    
                        
  • flex-start: Align to start (default)
    • 
                        
  • center: Align to center
    • 
                        
  • space-between: Distribute evenly, start/end flush
    • 
                        
  • space-around: Distribute evenly with spacing around
    • 
                    

                

                

                    
align-items

                    
Defines how items are aligned along the cross axis (usually
                        vertical).

                    
    
                        
  • stretch: Stretch to fill (default)
    • 
                        
  • center: Align to center
    • 
                        
  • flex-start: Align to start
    • 
                        
  • baseline: Align to baseline
    • 
                    

                

                

                    
flex-direction

                    
Determines the direction of the main axis.

                    
    
                        
  • row: Left to right (default)
    • 
                        
  • column: Top to bottom
    • 
                        
  • row-reverse: Right to left
    • 
                    

                

                

                    
flex-wrap

                    
Determines whether items should wrap onto multiple lines.

                    
    
                        
  • nowrap: No wrap (default)
    • 
                        
  • wrap: Wrap to next line
    • 
                    

                

            


            
FAQ

            

                

                    
                        Flexbox vs Grid?
                        ▼
                    
                    

                        Flexbox is one-dimensional (row OR column), great for components. CSS Grid is two-dimensional
                        (row AND column), great for overall page layouts.
                    

                


                

                    
                        How to center items vertically?
                        ▼
                    
                    

                        Use display: flex; and align-items: center; on the container. To
                        center both vertically and horizontally, add justify-content: center;.
                    

                


                

                    
                        justify-content: space-between vs space-around?
                        ▼
                    
                    

                        Space-between pushes the first and last items to the edges. Space-around puts equal space on
                        both sides of each item, meaning the space between items is double the space at the edges.
                    

                


                

                    
                        Is gap supported?
                        ▼
                    
                    

                        Yes, modern browsers (Chrome, Firefox, Safari, Edge) fully support the gap property
                        for Flexbox.
                    

                


                

                    
                        Why align-items not working?
                        ▼
                    
                    

                        Usually because the parent container doesn't have a defined height. If the height depends on the
                        content, align-items: center won't show any effect because the container is already
                        "tight" around the items.
                    

                


                

                    
                        Does row-reverse change DOM order?
                        ▼
                    
                    

                        No, it only changes the visual order. Screen readers usually read in DOM order. Use with caution
                        for accessibility.
                    

                


                

                    
                        Best use cases for Flexbox?
                        ▼
                    
                    

                        Navbars, card lists, vertical centering, inputs with flexible widths, and any layout requiring
                        distribution of space in a single dimension.
                    

                


                

                    
                        align-content vs align-items?
                        ▼
                    
                    

                        align-items aligns items in a single line. align-content aligns
                        multiple lines of items (when flex-wrap: wrap is on). It has no effect on single-line flex
                        loops.
                    

                

            


            
            
More Free Tools

            

                
                    

                        

                            CSS Clip-path Maker
                        

                        

                            
                                
                                
                            
                        

                    

                    
Visual tool to generate CSS clip-path
                        code. Create triangles, circles, and polygons easily.

                
                
                    

                        

                            Unit Converter
                        

                        

                            
                                
                            
                        

                    

                    
Convert length, weight, temperature,
                        area, volume and more instantly.

                
                
                    

                        

                            Pomodoro Timer
                        

                        

                            
                                
                            
                        

                    

                    
Boost productivity with the Pomodoro
                        technique. Custom timers and white noise included.