Home/Web Designing/Basic Concept of Flexbox For Beginners

Basic Concept of Flexbox For Beginners

29.Mar.2022

In this article, we’ll discuss CSS Flexbox and cover all the basic concepts that will help you to get a good understanding of the CSS Flexbox model.

What is Flexbox?

Flexbox is designed to arrange a group of layouts either rows or columns in one dimension. The Flexible Box Model or Flexbox is basically used for the arrangement and alignment of a group of items or gives a constant layout on different screen sizes.

Flexbox

Why Flexbox?

CSS has always been one of the most important parts of web development and creating CSS layouts everybody is frequently using Floats and Positioning which is a well-founded cross-browser compatible tool including Firefox, Chrome, Opera, Microsoft Edge, and IE 11, newer versions of Android/iOS, etc. But, this has its own limitations that make people frustrated.

Flexbox is the best alternative to overcome floats and positioning. With the help of Flexbox, you can easily design and build responsive web pages without using countless float and position properties in our CSS code. For example;

Text overlapping
Content creating Whitespace issues
Left overlap on other elements

The Flexbox makes a lot of layout tasks much easier like;

Vertically centering a block of content inside its parent.
Helps to arrange multiple items/product items in one line/columns/rows
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
It is a set of CSS properties

Let’s discuss them in brief.

3 Main Problems Resolved with Flexbox Instantly:

Vertical Centering: Let’s first talk about a universal coding problem. Vertical centering is an absolute pain for developers. You’d think that something that sounds so simple would be that way. Let’s take a look at an example.

Below we have a div block with a static height and some content inside of it.

As you can see, we had no problem centering it horizontally with the code shown.

But now we want to center it vertically as well. How would your average developer approach this? Well, I suppose you could give the div a padding-top property. But this is messy and would become a hassle if the div’s height was dynamic or ever needed to change. So after some research, a developer might come to this:

Vertical Centering with padding-top property

Here we have our div again, but this time with Flexbox code.

Match Height: This is the second most important problem faced by developers or designers every time. You’ll have a few objects aligned in the same row, and each one is filled with different content. All of them are going to be of different heights and maybe your designer wanted them all to be the same height. Well, the only way you can do that is to make all the objects in that row equal the height of the tallest one.

Here we have three different divs each containing an illustration

So let’s take a look at the HTML

Before Flexbox, the best solution would be to download a jQuery plugin like match-height.js or equalHeight.js and then target the img-container class in your Javascript file using a function.

That sounds like a lot of extra work for a really small adjustment. And news flash, it is. Instead, we’re going to implement Flexbox in the CSS like so:

And almost like magic, those two lines of code do everything for us.

Dynamic Stretching: To create a dynamic page for clients so that if they remove any small portion from the website in the future, they could.

Let’s take the example of a subscription pricing option on the website.

The problem here is that to do this we would need to resize all of the divs based on how many pricing options the client eventually input. Since we built the site on WordPress, this would require a lot of complicated PHP logic.

Now let’s make the assumption that we’re all simple front-end folk here and PHP isn’t exactly on the table. How can we go about doing this?

You guessed it: Flexbox.

In fact, this is Flexbox’s main purpose. To be able to “flex” children of a parent object to fill in all available space. This means that you don’t need to type up a bunch of back-end coding to get something like this to work. Here’s what the section was to look like if we removed the last pricing option: