Flexbox

Flexible Box Module commonly known as Flexbox is an easy way to align items into our webpage. It is a one dimensional layout method to arrange the items in row or column. Without Flexbox also we can achieve the results we want but it will be very easy task if we use flexbox. It is best replacement for properties like float and position. For Eg. If we want to center an element horizontally and vertically we can do it by using.

We need to define display as flex on the parent element of the elements for which we want to apply flex properties. It has a flex container and flex items.

Flex Container - It acts as a parent, holds all the inside it.

Flex Items - It acts as a child of parent element. It will get the layout properties applied in the parent container.

Flexbox Properties

Flexbox offers us a lot of properties which we can use, but we will study the most commonly used properties.

1. Flex Direction

It is used to set the direction of the flex item. We can define the main-axis by using flex-direction property. By default the flex direction is row. We have other flex-direction property also:

1.1 flex-direction:row(Default Value)

It aligns the item from left to right.

Eg.

1.2 flex-direction:row-reverse

It aligns the item from right to left.

Eg.

1.3 flex-direction:column

It aligns the Item from top to bottom.

Eg.

1.4 flex-direction:column-reverse

It aligns the item from bottom to top.

Eg.

2. Justify Content

It is used to align items in main-axis. The default value of justify-content is flex-start.

You can try this values of justify-content one by one.

2.1. justify-content: flex-start(Default Value)

Will align the items in start of main-axis.

2.2. justify-content: flex-end

Will align the items in end of main-axis.

2.3. justify-content: center

Will align the items in center of main-axis.

2.4. justify-content: space-between

Items will have space between them.

2.5. justify-content: space-around

Items will have space before, between and after them.

2.6. justify-content: space-evenly

Items will have equal space between them.

3.Align-Items

It is used to align items in cross-axis. The default value of justify-content is flex-start.

You can try this values of align-items one by one.

3.1. align-items: flex-start(Default Value)

Will align the items in start of cross-axis.

3.2. align-items: flex-end

Will align the items in end of cross-axis.

3.3. align-items: center

Will align the items in center of cross-axis.

4. Order

The higher the order of an item it will be place later and vice versa. By Default all items have order of 0.

Eg.

5. Flex-Wrap

It is used to specify whether the items should wrap or not when we shrink the web page. The default value of flex-wrap is no-wrap. Let us look at other values of flex-wrap.

5.1. flex-wrap:no-wrap(Default)

5.2. flex-wrap:wrap

Will wrap the items into multiple lines in same order.

5.3. flex-wrap:wrap-reverse

Will wrap the items into multiple lines in reverse order.

6. Flex-Grow

It sets the growth property of an item. The default value is 0. The greater flex-grow value of an item that item will grow faster.

7. Flex-Shrink

It sets the shrink property of an item. The default value is 1. The greater flex-shrink value of an item that item will shrink faster.