CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

You can learn more about CSS BOX Model here.

Box layout means to position a box on the page. So you may like to center an element horizontally or vertically or you may want to move the element to any other position on the page. Laying out your page is the most important task which determines the overall look of the page.

CSS has got many ways to align a box. You could choose floats, position property or you could try aligning it using margin and padding. But it's not always so easy to align an element as you wish to. Developers have always been having difficulties to center an element horizontally or vertically. If you try using floats, you will see that it requires more work and gives you extra lines of code to position the element. So what's the way out?

Here comes the modern CSS Flex Box technique. After using Flex Box for the first time you will forget the difficulties you have been facing with your layout. You will make your layout with fewer lines of code and very quickly.

Now after having Flex Box in your hand you don't need to worry about every single element in your container. What you need is just add one or two lines of code and there you go.

What Are Some Of The Most Popular Uses Of Flex Box?

You can use Flex Box Almost anywhere on your website to align your content, but I found it more useful to apply it on certain parts of my page than others.

1: Navigation bar

The Navigation menu is mostly a horizontal or vertical bar on top or side of the page with links to other parts of the page. You can create a container for it and apply Flex Box to it so that you can move it's items wherever it's suitable for your page layout.

2: Footer

Footer of a website mostly includes contact details, logo, and some links to other parts of the site. You can align your footer content with the help of Flex Box too.

3: Horizontal Alignment

You can align your container's elements on the horizontal line wherever you like and can add space in them.

4: Vertical Alignment

It often requires to position elements vertically, so there is a very easy way to achieve it with Flex Box. You just need to add one line and it's already done.

4: Re-Ordering Elements

Flex Box has a function that allows you to rearrange the order of your elements in a container. You can change the order of any element you like.

How Does Flex Box Work?

CSS Flex Box has a model and it's very important to understand it to use Flex Box efficiently in your projects. There are two axis in FlexBox. One is the main axis and the other is called the Cross axis. So by using these two dimensions you can position your elements wherever you need to. 

Main Axis

The main axis can be horizontal or vertical. So some specific properties can be used inside a container only to position items on the main axis.

Cross Axis

The Cross axis can be horizontal or vertical. So there are some properties only for this dimension to use.

Flex Box Properties For Container Only

Now I will explain only those properties of Flex Box which are only used inside the container to layout its items.

Flex-direction

So now we know that we will work on two axis. We have flex-direction property to define our axis. Flex-direction by default is row so it means our main axis by default is horizontal. We can shift our main axis to vertical by writing flex-direction: column. We can work on row-reverse and column-reverse direction as well.

Flex-wrap

This property is used to specify whether our items should wrap on a new line once they fill the whole space on the current line. This property has no-wrap value by default. It can have a value wrap which means it is allowed for items to wrap on a new line. It can also obtain a row-reverse value which means now items will wrap but by reverse fashion. 

Flex-flow

This is a shorthand property for flex-flow and flex-wrap. It can be written as flex-flow: column wrap. So first value on left is associated with flex-direction and the last one shows the flex-wrap property value.

Justify-content

This property is used to position items of a container on the main axis. It has a default value which is flex-start. It means all the items will be at the beginning of the container by default. It can have a value center which means to center all the items on this axis.

Flex-end value is placed when it's required to move all the items to the end of the container. It has two more values that are used to add space to elements. One value is space-between and the other is space-around. Space-between is used to add equal space between all the elements and space-around adds equal space around the elements.

Align-items

Align-items property is used to position items on the cross axis. It has many values to fulfill the tasks. Its default value is flex-start. It also can obtain a value to move the items to flex-end. Flex-stretch value is placed when it's required to stretch the items to cover the remaining space in the container. Baseline value lets the items align so that their baseline also aligns.

Align-content

When you have many items in a container, these items start to shape themselves as lines by wrapping on new lines. Align-content property is used to align those lines of items and to add space in them. It has many properties. All its values are the same as align-items, but the difference is that these values work only for the lines of items rather than on items.

CSS-TRICKS has a really well explained guide on CSS Flex Box. You can access it by clicking here.

That's it! Thanks for reading and supporting me. Let me know if you have any questions below.