CSS Flexbox

AiraCSS's flex grid offers a simple, customizable way to create responsive layouts. Cross-browser compatible, it's perfect for modern, adaptive web design.

AiraCSS Framework features a robust flex grid system that simplifies the creation of responsive layouts. By leveraging the power of CSS Flexbox, AiraCSS's flex grid enables you to design complex and adaptive web pages effortlessly.

Example

Using AiraCSS's flex grid is simple and intuitive. Here's a basic example to get you started:

  1. Add a columns container
  2. Add as many col elements as you want

Each column will have an equal width, no matter the number of columns.

First column
Second column
Third column
Fourth column
            


  

      First column
  

  

      Second column
  

  

      Third column
  

  

      Fourth column

Columns Sizes

If you want to change the size of a single column, you can use one of the following classes from col-1 to col-12

col-12
col-11
Auto
col-10
Auto
Auto
col-9
Auto
Auto
col-8
Auto
Auto
col-7
Auto
Auto
col-6
Auto
Auto
col-5
Auto
Auto
col-4
Auto
Auto
col-3
Auto
Auto
col-2
Auto
Auto
col-1
Auto
Auto

  

    

          

            col-12
          

    





    

          

            col-11
          

      

    

      
Auto

    


   


    

      

        col-10
      

    

    

      
Auto

    

    

      
Auto

    


 

  

    

      

        col-9
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-8
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-7
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-6
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-5
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-4
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-3
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-2
      

    

    

      
Auto

    

    

      
Auto

    

  


  

    

      

        col-1
      

    

    

      
Auto

    

    

      
Auto

Nesting

You can nest columns to have more flexibility in your design. You only need to follow this structure:

  • columns: top-level columns container
    • col
      • columns: nested columns
        • col and so on…
First column
First nested column
Second nested column
Second column
50%
Auto
Auto

  

    

      
First column

      

        

          
First nested column

        

        

          
Second nested column

        

      

    

    

      
Second column

      

        

          
50%

        

        

          
Auto

        

        

          
Auto

Different Columns sizes per breakpoints

You can define a column size for each viewport size: mobile, tablet, and desktop.

col-sm-9
col-md-8
col-lg-6
col-xl-3
2
3
4
5

  

    

      

        col-sm-9

        col-md-8

        col-lg-6

        col-xl-3

      

    

    

      
2

    

    

      
3

    

    

      
4

    

    

      
5

Offset

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

col-2
col-4 col-ml-auto
col-4 col-ml-auto
col-2
col-4 col-mx-auto
col-2
col-4 col-mr-auto
col-2
col-4 col-mx-auto
      
        

          

            
col-2 

          

          

            
col-4 col-ml-auto

          

        

      
        

          

            
 col-4 col-ml-auto

          

          

            
col-2

          

        

      
        

          

            
 col-4 col-mx-auto

          

          

            
col-2

          

        

      
        

          

            
col-4 col-mr-auto 

          

          

            
col-2

          

        

      
        

          

            
col-4 col-mx-auto
There are other variants of offset which are offset-1 to offset-11 to set margin left.It's responsive variant are offset-sm-1 to offset-sm-11
col-2
col-4 offset-1
col-2
col-4 offset-2
col-2
col-4 offset-3
col-2
col-4 offset-4
col-2
col-4 offset-5
col-2
col-4 offset-6
  
    

      

        
col-2 

      

      

        
col-4 offset-1

      

    


    

      

        
col-2 

      

      

        
col-4 offset-2

      

    


    

      

        
col-2 

      

      

        
col-4 offset-3

      

    



    

      

        
col-2 

      

      

        
col-4 offset-4

      

    


    

      

        
col-2 

      

      

        
col-4 offset-5

      

    


    

      

        
col-2 

      

      

        
col-4 offset-6

Alignment

Vertical Aligment

Use flexbox alignment utilities to vertically and horizontally align columns.

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns 



   

     
One of three columns

     
One of three columns

     
One of three columns

   

   

     
One of three columns

     
One of three columns

     
One of three columns

  

  

    
One of three columns

    
One of three columns

    
One of three columns
One of three columns
One of three columns
One of three columns 

  

    

      
One of three columns

      
One of three columns

      
One of three columns

Horizontal Aligment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns 

  

    

      
One of two columns

      
One of two columns

    

    

      
One of two columns

      
One of two columns

    

    

      
One of two columns

      
One of two columns

    

    

      
One of two columns

      
One of two columns

    

    

      
One of two columns

      
One of two columns

    

    

      
One of two columns

      
One of two columns

Reordering

Order Classes

Use order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12.

First in DOM, no order applied
Second in DOM, with a larger order of 5
Third in DOM, with an order of 1 

   

     
First in DOM, no order applied

     
Second in DOM, with a larger order

     
Third in DOM, with an order of 1

AiraCSS's flex grid offers a simple, customizable way to create responsive layouts. Cross-browser compatible, it's perfect for modern, adaptive web design.