Flexbox Force Wrap

Blog | Flexbox Force Wrap

Using Flex Box is a modern and highly effective way to create responsive web site with fluid layouts. As modern browsers support the CSS flex property there are few drawbacks other than it not playing nicely in older browsers and/or Internet Explorer 11. Sometimes though you may want to force a break / new line in a flex layout (in the same order) purely for design purposes, so for example you may want to show less items on a top row than on the second row. That goes against the flexbox natural layout, as usually you would have the row with the lesser number of items on the bottom.

Example

On a recent client site we wanted 6 items on the first line and 7 on the second and we wanted this to happen 'Cross Browser'.Natural FlexThe natural flex without a break would display like:-

Ad You might find this useful

Record your screen to communicate better

Loom is the fastest way to record quick videos of your screen. It's easy to use and perfect for hybrid workplaces. FREE & affordable paid plans.

Get Loom

Start Recording for Free

Record your screen to communicate better

Promo Save on Loom

Ad You might find this useful

Award Winning VPN Deal

Become invisible online with Surfshark VPN and protect your online presence with: -

✔ 100 VPN Server locations
✔ Alternative email generator
✔ Data breach alerts
✔ Malware protection
✔ Tracker and ad blocker

Get Surfshark

Get Surfshark VPN

Promo Save on Surfshark

So we have more items (1) on the top row, but what we want to see is:-Flex WrapA flex wrap after the 7th item so that we get an initial 2 rows with one more item on the top row:-

The Flex Wrap Code

Yes there are ways to force a wrap with CSS 'flex-wrap: wrap;'... but we found the only way to ensure a flex wrap in an out of sequence order Cross Browser is to physically insert a 'flex-basis' 100% div that forces a break at a specific point and this is how you do it:-

Ad You might find this useful

Maximize Your Productivity with Rize AI

Rize is an AI productivity coach that uses time tracking to improve your focus and build better work habits. It is available for macOS and Windows.

With the Slick Media Promo (click promo link bottom right), you can get a 25% discount on your first three months of Rize.

Get Rize

Get Started for Free

Promo Save on Rize


    
      
        
  
    
    

        


  


  
        
          
          <!-- Script -->
        
        
          
          <script>
        
        
          
          $( document ).ready(function() {
        
        
          
          $('.services-item:nth-of-type(6)').after('<div class="break"></div>');
        
        
          
          });
        
        
          
          </script>
        
        
          
          

        
        
          
          <!-- CSS  -->
        
        
          
          <style>
        
        
          
          .break {
        
        
          
          flex-basis: 100%;
        
        
          
            width: 0px; 
        
        
          
            height: 0px; 
        
        
          
            overflow: hidden;
        
        
          
            display: inline-block; 
        
        
          
            }
        
        
          
          /* Remove Break on Mobiles for natural Flex */
        
        
          
          @media screen and (max-width: 479px) {
        
        
          
          .break {display: none;}
        
        
          
          }    
        
        
          
          </style>
        
  



    

  


      
      
        view raw
        
          Flexbox Force Wrap
        
        hosted with ❤ by GitHub

So what the code does is insert a .break div after the 6th item to force a break/new line after that item, pushing the other items to the next line out of the usual flow (as per the second of the above images)

‍Note: You don't have to use script to insert the .break div if you prefer to hard code it manually. In our case the items were being dynamically created and so the script was able to interrupt the html output to allow for the break.

Ad You might find this useful

Wavebox is the revolutionary browser you should be using Now!

Be more productive with apps, tidy tabs, multi-account sign-in, unified search, flexible workspaces, and more...

Get 35% OFF with the Slick Media Wavebox Promo Code (click promo link bottom-right)

Get Wavebox

Wavebox is the revolutionary browser you should be using Now!

Promo Save on Wavebox

‍