FlexBox

A Flexbox layout or a flexbox is a CSS web layout model which helps us to design the website more efficiently and at a faster pace. Before Flexbox was introduced block, inline elements and positions were used to design a webpage. The Introduction of flexbox has made building the webpage easier than before.

Flexbox Container :

A Flex Container can be considered as a parent element and we apply various flexbox properties on this container so that the child elements are aligned as per our need. To apply flex we need to use the below property first.

container {
                display : flex;
}

Going forward we are going to look at each property with some examples.

Flexbox Properties :

- Flex-Direction :

By default the direction of flex is row. So when we use this property the items in the container align themselves in a row.

1. flex-direction: row;
2. flex-direction: column;
3. flex-direction: row-reverse;
4. flex-direction: column-reverse;

These are the four types of flex-direction and as the name suggests it help us the elements to align accordingly. Below is the example to understand flex direction.

flex-direction: row;

flex-direction: column;

flex-direction: row-reverse;

flex-direction : column-reverse;

Alignment :

Before Jumping into alignment there two points to be noted. Justify-Content and Align-Items are used to position the elements in the web. When flex-direction : row then justify-content axis is from left-right and align-items from top-bottom. When the flex-direction : column then justify-content axis is from top-bottom and align-items from left-right.

- Justify Content And Align-items :

This is used to place the element at a specified position

• justify-content : center , align-items : center

• Here the two boxes are placed at the center of the container.

• justify-content : flex-start , align-items : flex-start

• Here the two boxes are placed at the start of the container horizontally and vertically.

• justify-content : flex-end , align-items : flex-end

• Here the two boxes are placed at the end of the container horizontally and vertically.

• justify-content : space-around

• Here the two boxes are placed at position such that they have equal spaces all around them.

• justify-content : space-between

• Here the two boxes have space in between.

- Align-Content :

Align-Content works similar to Align-Items but for Align-Content the content should be in more than one row.