Flexbox

Flexbox Properties

• Display

• Flex-Direction

• Justify-Content

• Align-item

• Flex-Wrap

• Gap

• Flex-Grow

• Align-Self

• Order

Flexbox

It is easier to design flexible responsive layout structure without using float and positions.Flexbox is one dimensional.

Display

This defines a flex container.

Syntax:

display: flex;

Example

Flex-Direction

It defines the direction of flex items.The flex-direction properties are row,row-reverse,column and column-reverse.

Syntax:

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Row - In flex row the flex items are placed by default to left side

Row-Reverse - In Row-Reverse the flex items are placed from left to right side in reverse order.

Column - In column the flex items are placed in horizontally from top to bottom.

Column-Reverse - In column-reverse the flex items are placed from bottom to top in reverse order.

Example

Justify-Content

Is used to align the flex items.The justify-content properties are flex-start,center, space-around,space-between,space-evenly and flex-end.

Syntax:

justify-content: flex-start;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

justify-content: flex-end;

Flex-start - By default it is start from the beginning of a container.

Center - The align items go to center.

Space-around - The align items have space before,between and after the lines.

Space-between - The align items have space between the lines.

Space-evenly - The align items have space before,space evenly and after the lines.

Flex-end - The flex items are placed at the end of the container.

Example

Align-items

Is used to align the flex items.The align-items properties are flex-start,center,flex-end, stretch and baseline.

Syntax:

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch;

align-items: baseline;

flex-start - It aligns the flex-items at the top of the container.

Center - It aligns the flex items in the center of the container.

flex-end - It aligns the flex items at the bottom of the container.

stretch - It can stretch the align terms to fill the full container.

baseline - Items are align such as their baseline align.

Example

Flex-Wrap

The flex containers are wrap or unwrap.The flex-wrap properties are wrap,no-wrap and wrap-reverse .

Syntax:

flex-wrap: wrap;

flex-wrap: no-wrap;

flex-wrap: wrap-reverse

wrap - It specify the flex containers into single line or multiple line.

no-wrap - In no-wrap all flex containers are in one line.

wrap-reverse - The flex containers are reverse from bottom to top.

Example

Gap

It gives gap between rows and columns.The gap properties are row-gap and column-gap.

Syntax: gap: 10px;

row-gap: 10px;

column-gap: 10px;

row-gap - It gives gap between row items.

column-gap - It gives gap between column items.

Example

Flex-Grow It specifies how much a flex item will grow.

Syntax:

flex-grow: 1;

Example

Align-Self

It specifies the alignment of a flex items.The align-self properties are center,flex-start,flex-end,auto,stretch and baseline.

Syntax:

align-self: center;

align-self: flex-start;

align-self: flex-end;

align-self: auto;

align-self: stretch;

align-self: baseline;

flex-start The flex item is at the top of the container.

flex-end The flex item is at the end of the container.

center The flex item is at the center of the container.

Example

Order

It specifies the order of the flex items.You can change the order of flex items.

Syntax:

order: 3;

Example

In the above example division 1 order is change into second position and division 2 order change into third position.