FlexBoxing

As a web developer, webpage organization is one of the most important aspects needed for having a great quality app that looks appealing. As pages get more complex its important to have the right tools to start with, it's easy starting with CSS when you begin to apply style properties to elements on your page, but as the layout gets more complex and user are viewing from different screen sizes, different OS, version, screen resolution, etc, things can get very ugly very fast.

While doing some research i found a tool that many developers use called “Flexbox” or the flexible box method. In this article we are going to explore benefits of Flexbox and how to get it up and running on your projects.

If you have design and development in mind Flexbox is one of the best tools in web development. Today you see manu developers using Flexbox to some extent within their projects, and after this article you will be ready to use it too and understand why is a great tool.

Some time ago developers often used only use HTML to build their entire web pages, including design and formatting. Web Page design only using HTML is very restrictive and could take massive amounts of time to make changes.

Then came the invention of Float, which helped minimize some of those difficulties of only using HTML. It was used initially for image wrapping until new uses were soon discovered. Float became a great alternative for grid layout, since developers could create and edit a web page without having to rewrite the entire code. Even though Float was a great tool and was much better than the alternative of the HTML table, it wasn't perfect but it was a clear upgrade.

Flexbox will help with this :)

BOOOM! Flexbox was born! it was designed as a user friendly way to manipulate and design a one-dimensional layout model and to arrange items within a container,or “flexbox”. With this tool we are able to achieve complex layouts with few declarations(inline element manipulation, centering items, automatic spacing). So let's dive in about the practical ways use this.

Flex Container

When using flex, you will need a parent container div where you will wrap all the children elements. The parent div is the with box above, and an example in code can be seen below.

To start using the Flexbox model, all you need to do is first define a flex-container. In regular HTML, laying out a simple list of items takes this form:

<div class="container1">
    <div class="box-1">
      <h3>Box One</h3>
      <p>1/3</p>
    </div>
   <div class="box-2">
      <h3>Box Two</h3>
      <p>2/3</p>
    </div>
   <div class="box-3">
      <h3>Box Three</h3>
      <p>3/3</p>
    </div>  
  </div>

After we can add Flexbox properties to this parent div within CSS by adding display:flex;. This is how you initialize Flexbox.

.container1{
    display:flex;
   }

We can see that the div box items have become ‘flexible items’ and now span across the page, as opposed to vertically listed items. This is the first step to making our page ‘flexible’. Now that our items are flexible, we have many options, I will help with three of the most applicable properties: justify-content, align-items, and wrapping . I recommend gamification sites such as Flexbox Froggy if you’d like to learn more.