Flexbox has change the way we write css code. Flexbox has actually made css code much easy, simply and understandable. It also handle responsiveness of the website. It provides built-in support for responsiveness of webpage

Flexbox stands for flexible box. It provides an easy and efficient way to align items in a container.

Flexbox is used for building one-dimensional layouts.The Flexbox also known as Flexible Box Module is a web layout model.

The two axes of Flexbox.

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis.

1. Main-axis

Axis along which we are trying to align our flex items. The main axis is defined by the flex-direction property

1. Cross-axis

The cross axis runs perpendicular to main axis. if main axis is selected as row then cross axis will be column.

Flex Direction

Flexbox's main axis is defined by the flex-direction property, which has four possible values that determine the direction towards which the flex items will be placed within the flex container:

• row- This is the default value. If the direction of the main axis is right to left (rtl), then the flex items will be placed rtl. If the main axis' direction is left to right (ltr), then the flex items will be placed ltr.

  https://codepen.io/Sushanm/pen/KKoBNQY

• row-reverse- If main axis is rtl, then flex items will be ltr.

  https://codepen.io/Sushanm/pen/LYdBxxQ

• column- the direction of flex item would be top to bottom.

  https://codepen.io/Sushanm/pen/dymjNmq

• column-reverse- like row-reverse, but bottom to top.

  https://codepen.io/Sushanm/pen/wvmxgXv

Flex-Wrap

By default, flex items will all try to fit into single line. We can change that and allow the items to wrap as needed with this property.

• no-wrap - all flex items will be on one line

  https://codepen.io/Sushanm/pen/mdxjRGg

• wrap - flex items will wrap onto multiple lines, from top to bottom.

  https://codepen.io/Sushanm/pen/OJvwWBL

• wrap-reverse - flex items will wrap onto multiple lines from bottom to top.

  https://codepen.io/Sushanm/pen/zYWLNMp

Justify-Content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.Values of justify-content are:

• flex-start - Default value. Items are positioned at the beginning of the container

  https://codepen.io/Sushanm/pen/WNzKRWx

• flex-end - Items are positioned at the end of the container

  https://codepen.io/Sushanm/pen/rNdrjgp

• center -- Items are positioned in the center of the container

  https://codepen.io/Sushanm/pen/VwXBPOR

• space-between -- Items will have space between them

  https://codepen.io/Sushanm/pen/gOejgVO

• space-around -- Items will have space before, between, and after them

  https://codepen.io/Sushanm/pen/ZExjLgX

• space-evenly -- Items will have equal space around them

  https://codepen.io/Sushanm/pen/yLKqgmX

Align-Items

In Flexbox, align-items controls the alignment of items on the Cross Axis.

• stretch - Default. Items are stretched to fit the container

  https://codepen.io/Sushanm/pen/MWVBpgv

• center - Items are positioned at the center of the container

  https://codepen.io/Sushanm/pen/VwXBpZN

• flex-start -Items are positioned at the beginning of the container

  https://codepen.io/Sushanm/pen/vYRaxBq

• flex-end - Items are positioned at the end of the container

  https://codepen.io/Sushanm/pen/poLZejr