What is Flexbox?

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex(expand) to fill additional space or shrink to fit into smaller spaces. Flexbox makes a lot of layout tasks much easier.

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).

The flex container becomes flexible by setting the display  property to flex.

.container{
		display:flex;
}

The flex container properties are:

1. Flex-direction

Flex-direction property is used to give direction to element should be placed, four types of properties are defined.

• flex-direction: row; place flex-items in row (horizontal).
• flex-direction: row-reverse; place flex-items in row but in reverse order.
• flex-direction: column; place flex-items in column (vertical).
• flex-direction: column-reverse; place flex-items in column but in reverse order.

.flex-container {
  display: flex;
  flex-direction: column;
}

2. Flex-wrap

Flex-wrap property is used for wrapping flex-items inside the flex-container.

• flex-wrap : nowrap will not wrap flex-item in flex-container.
• flex-wrap : wrap will wrap flex-item in flex-container if it not fit in container size.