Take the guess work out of CSS3 Flex Box and use Flexy Box to create modern fluid page layouts.

Flexy Box uses a 12 column layout system. Go ahead and resize your browser. Your page layout will adjust across all device sizes. The following breakpoints are supported:

• xs: 0 - 599px
• sm: 600px - 959px
• md: 960px - 1280px
• lg: 1280px and larger

    
     <div class="flex-row">
       <div class="flex-xs-12 flex-sm-1 flex-md-1 flex-lg-1">
       </div>
       <div class="flex-xs-12 flex-sm-11 flex-md-11 flex-lg-11">
       </div>
     </div>

     <div class="flex-row">
       <div class="flex-xs-12 flex-sm-2 flex-md-2 flex-lg-2">
       </div>
       <div class="flex-xs-12 flex-sm-10 flex-md-10 flex-lg-10">
       </div>
     </div>
        ...
    
  

Cool, let's use this to create a complete page layout. Notice we set a default class on each element 'flex-*' and a 'flex-xs-*' class to change the Flexy Boxes to stack at full page width when the browser size drops below 600px.

      
        <div class="flex-row">
            <div class="flex-12">
                <div>header</div>
            </div>

            <div class="flex-2 flex-xs-12">
                <div>sidebar</div>
            </div>

            <div class="flex-8 flex-xs-12">
                <div>content</div>
            </div>

            <div class="flex-2 flex-xs-12">
                <div>aside</div>
            </div>

            <div class="flex-12">
                <div>footer</div>
            </div>
        </div>
    
  

You can also use shortcuts to set consistent responsiveness across any device type

    
     <div class="flex-row">
       <div class="flex-4">
         ...
       </div>
       <div class="flex-8">
         ...
       </div>
     </div>
    
  

By default Flexy Boxes are wrappable. Stack as many as you want and they will wrap to the next line. If you want to wrap boxes, make sure to set a min-width.

Use the 'no-wrap' class to disable wrapping. Flexy boxes will shrink as the view port changes. Beware that setting a combined 'min-width' that is larger that your screen on an element may cause the Flexy Box to bleed.

Resize the browser to see "will grow" item expand to a max width of 100% after it wraps. To fill a specific item add just use the 'flex' class

    
     //Wrap
     <div class="flex-row">
       <div class="flex-1">
         ...
       </div>
         ...
     </div>

     // No Wrapping
    <div class="flex-row no-wrap">
       <div class="flex-1">
         ...
       </div>
         ...
     </div>

    // Grow a specific item
    <div class="flex-row">
       <div class="flex-9">
         ...
       </div>

       <div class="flex-2">
         will flex
       </div>

       <div class="flex-1 grow">
         will flex
       </div>
         ...
     </div>
    
  

Flexy Box also includes simple shortcuts that can be applied to the Flexy Box container (row or column) when you need to position your Flexy Boxes. The first part of the prefix centers horizontally and the second part vertically. For example, 'start-center' will position your Flexy boxes to the left and center in their container.

• start
• start-start
• start-center
• start-end
• center
• center-start
• center-center
• center-end
• end
• end-start
• end-center
• end-end
• start-stretch
• center-stretch
• end-stretch

    
     <div class="flex-row {horizontal}-{vertical}">
       <div class="flex-1">
       </div>
     </div>
    
  

start-start

center-center

end-end

You can also apply spacing and positioning in one fell swoop.

• space-between-start
• space-between-center
• space-between-end
• space-around-start
• space-around-center
• space-around-end
• space-between-stretch
• space-around-stretch

    
     <div class="flex-row space-between-{vertical}">
       <div class="flex-1">
       </div>
     </div>

     <div class="flex-row space-around-{vertical}">
       <div class="flex-1">
       </div>
     </div>

    
  

space-between-start

space-around-center

space-between-end