What is CSS Flexbox

CSS flexboxes are modern css layout that help us to order elements vertical and horizontal.

Why flexbox?

It is easier to make responsive our website with flexbox.
Flex structure is simple.
Flexbox supported by all browsers today.

How to use Flexbox:
There are 2 main item in flexbox. First Container , second Items.

Display
Using display:flex we make our container flexible.

.container{display: flex /* or inline-flex */}

Flex Direction

![flexcontainer}(https://miro.medium.com/max/490/1*s-G7MS21vXkAgI1gTBzeBg.png)

Flex direction used to determine how items arranged in layout(horizontal or vertical) and applied to the container element.

.container{
display: flex /* or inline-flex*/
flex-direction: row /* or  | row-reverse | column | column-reverse */;
}

• row (default): standard layout from left to right
• row-reverse: reverse layout from right to left
• column: From top to bottom layout
• column-reverse: From bottom to top layout

Flex-wrap

Flex-wrap mostly used for creating responsive layouts. The flex-wrap property is specified as a single keyword chosen from the list of values below.

• nowrap (default): All elements are in 1 row.This is the default value.
• wrap: The flex items break into multiple lines.
• wrap-reverse: Behaves the same as wrap but it have reverse order.

Justify-content

It defines the alignment along the main axis.

Align-items

It help us alignment of items in y-axis.

For more dev posts : Link