Basic Concept of Flexbox For Beginners

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:

  1. 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.

Vertical Centering

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

Vertical Centering

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.

Flexbox output vertical centering
vertical centering with flexbox code
  1. 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

Match Height

So let’s take a look at the HTML

Match Height code

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:

Match Height in CSS

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

Match Height with Flexbox
  1. 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. 

Dynamic Stretching

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:

Dynamic Stretching with Flexbox

And all we needed in our code was:

Dynamic Stretching with flexbox code

Properties of Flexbox:-

  • Properties for the Parent (Flex Container)
  • Properties for the Children (Flex Items)

Flex Container

(display: flex;)

  • Flex-direction
  • Flex-wrap
  • Flex-flow
  • Justify-content
  • Align-content
  • Flex Direction:

   row | row-reverse | column | column-reverse;

   For Row: display : flex;

                    flex-direction : row;


Flex Direction Row Example

Reverse: display:flex;

flex-direction : row-reverse;

Flex Direction row reverse

For Column: display : flex;

                      flex-direction : column;

Flex Direction column

Reverse: display:flex;

               flex-direction: column-reverse;

Flex Direction column reverse

  • Flex Wrap:

nowrap | wrap | wrap-reverse

For Flex Wrap:

display : flex;

flex-wrap : nowrap/wrap/wrap-reverse

Flex Wrap Example

  • Flex Flow:

column wrap | row wrap

(Shorthand property for setting both the flex-direction and flex-wrap)

For Flex Flow : 

display : flex;

flex-flow : column wrap / row wrap;

Flex Flow Row Wrap
Flex Flow Column Wrap
  • Justify Content: (Horizontal Align)

flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right | unset | normal | inherit | initial  

Flex Justify Content Example
  • Align Items: (Vertical Align)

stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end

flex align iten center example
  • Align Content:

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline

align content

Flex Items:

Properties for the Children:-

1. Order: Rearrange the order for flex-item

Flex Item order

2. Flex Grow: One of the items to grow more than others

Flex Grow

3. Flex Shrink: The ability for a flex item to shrink if necessary

Flex Shrink

4. Flex Basis: Property specifies the initial length of a flex item

Flex Basis

5. Align Self: Property overrides the default alignment set by the container’s align-items property.

Syntax:

order :  1;

flex-grow : 3;

flex-shrink: 2;

align-self: center;

Some Other Properties:

  • Gap
  • Row Gap
  • Column Gap

Reference:

https://icepick.co/coding/flexbox/

Read More Articles: Server to Server Files Migration