Hi, In this article I am writing about CSS Flexbox.

The Flexbox also known as Flexible Box Module is a web layout model.Flexbox makes us easier to design flexible responsive layout structure without using float or positioning.

The two axis of Flexbox.

1.Main-axis

The main axis is usually defined by flex-direction and it has four values. The default flex-direction is row.

If the main axis selected as row or row-reverse, the main axis runs from left to right of page.If column or column reverse is selected, the main axis runs from top to bottom of the page.

Flex-direction:row

Flex-direction:column

Flex-direction:row-reverse

Flex-direction:column-reverse

2.Cross-axis

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

Justify-content

flex-start

Places all items at the start of the main axis which is the left side of the axis by default. This is also the default behavior of justify-content

flex-end

Places all items at the end of the main axis which is the right side of the axis by default.

center

Places all items in the center of the main axis. This is one of the easiest ways to center elements in CSS.

space-between

This takes all the extra space inside the container and evenly spreads it between each element to space them as far apart as possible from one another while filling the full container.

space-evenly

This is very similar to space-around, but the space between the outside of the container and the first/last element is the same as the space between elements instead of half the size.

space-around

This is very similar to space-between, but it also adds space between the outside of the container and the first/last element. The amount of space between the outside of the container and the first/last element is exactly half the amount of space between elements.

Align-items

Stretch

This will stretch all items to fill the full height of the cross axis unless they have a specific height set. align-items:stretch

Center

This works the same as center for justify-content, but will center based on the cross axis. align-items:center

flex-start

This works the same as flex-start for justify-content, but will start at the top of the cross axis by default. align-items:flex-start

flex-end

This works the same as flex-end for justify-content, but will start at the bottom of the cross axis by default. align-items:flex-end

Sizing Flex Items

The real power of flexbox is not in its layout properties (even though, those are amazing), but in its ability to resize items based on the size of other elements on your page.

flex-grow

The flex-grow property is a property you define on a flex item and it tells the item how much of the extra space that item is allowed to take to fill its container. By default this property is set to 0 which means the item does not get any extra space.

In the below example we have given the first image as flex-grow:1 and by default other images will have flex-grow:0

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

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

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