Blog

Our clients aren’t required to know code in order to run their sites, but with a brand spanking new website it’s always helpful to know a little bit about what’s under the hood.

The Basics

Before we dive into an explanation on flexbox, let’s start with the programming language it’s based off of. Cascading Style Sheets, or CSS, is the programming language that tells your browser how to style your site’s elements; elements include every aspect of your website such as page headers, font size, font color, background, etc. Think of CSS as the “skin” of your website, while the HTML code acts as the skeleton. By changing the CSS code of your website you can completely change how your site looks to the end user. These changes can be as easy as changing an image size or background color, or as difficult as completely changing the layout of your site. However, as powerful as CSS is, it has its share of limitations. In the past, programmers would use a method called “floating” to, you guessed it, float elements left or right to build the layout of a site. But the float property was never meant to be used as a layout technique, and thus caused programmers myriad issues when floating multiple elements around the page. And just when our heroic, ever so handsome front-end programmers presumed they were doomed to be forever floating in the vast ocean of the web (pun absolutely intended), a savior appeared on the horizon.

Enter Flexbox

Okay… That may have taken a slight turn for the dramatic, but trust me when I say that the introduction of flexbox was like a divine light shining through an otherwise bleak and cloudy day. We don’t need to get in depth on the programming aspect of flexbox, but a basic understanding of the concept may help you understand what is going on behind the scenes of your website. You will see how better programming techniques benefit the end user (that’s you) in the long run.

Flexbox is short for the Flexible Box model. Without getting too bogged down in the technicalities, this essentially allows elements in the page to become “flexible” rather than static. Instead of defining widths and heights, flexbox elements take up as much space as they need regardless of screen size. For example, lets say you want four links spread evenly across the top of your website. In addition to this, you would prefer these links spaced out proportionally on every screen size possible. Flexbox would be able to accomplish this with one line of code, as opposed to 10-15 lines of code using previous methods.

Another extremely useful tool flexbox provides is the ability to change the order of elements without changing the HTML structure of your site. What does that even mean?! Let me give you an example! Say you have your main content on the right hand side of your page, with your sidebar on the left. When your viewers visit your site on a mobile device, your site’s responsive design kicks in and now your sidebar is above your main content on every page, meaning your viewers will have to scroll down past the sidebar on every page to get to the content they are looking for; this is not an optimal user experience. Before flexbox, many times programmers would have to completely restructure the HTML code to fix this issue, which in turn broke other aspects of the site causing more bugs and more time spent fixing problems that weren’t even there before. With flexbox you simply need one line of code to change the order of the flexbox items to whatever you choose without affecting any other surrounding elements. Want a different order of blog articles on a mobile device? One line of code. Want to change the order of your navigation depending on where your users are on the site? One line of code. It makes the lives of us programmers much less hectic, and the benefits are ultimately received by our clients.

These small margins of decreased lines of code may not sound like much, but take a website with 12,000 lines of code and those little time savers really start to add up. This means that a programmer with knowledge of how to use flexbox will be able to work on your site in a fraction of the time it would take using older practices. Therefore, any change you are looking for can be done, and at a much lower labor cost. It’s a win win sandwich.

Wrap Up

Congratulations! You made another step into the world of programming and came out alive. I hope you learned a little bit about how your site was built, or will possibly be built in the future. If you’re still confused on the whole concept, the one thing to take from this is that flexbox makes a programmer’s job easier and more cost efficient. This in turn, therefore making your site more productive and cost efficient. Plus, now you can show off to all of your tech savvy friends and tell them how much you know about flexball! Flexseal? Flexwear… Flexbox! Yes, that’s the one!