What is a Flex Box?

Flexbox is a one-dimensional layout method for arranging items in rows or columns. when flex property is applied to a box it changes its inner property and how elements inside the box behaves . Flexbox has 2 axes, the main and secondary axis. Axis decides how elements are going to place in the container.

Flex-box properties:

1. Display

This is the most basic property. It applies to the container and enables the power of the flex-box to the entire div. there are two values for this property

display:flex;

2. Flex-direction:

flex-direction is used to specify the directions in which the items inside the flex-box are placed. It can take the values row,column,row-reverse,col-reverse.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction:row ::

flex-direction:column ::

flex-direction:row-reverse ::

flex-direction:col-reverse ::

3.Flex-wrap:

flex-wrap is used to determine whether the flex container will be single line or multi-line. The direction of the cross-axis can also be changed using flex-wrap.

> flex-wrap: nowrap
    it is default.
> flex-wrap: wrap;
> flex-wrap: wrap-reverse;

4.JUSTIFY-CONTENT :

justify-content is used to align the contents of the container along the main axis. It can take the following values:

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ;
}

justify-content : space-between ;

justify-content : space-arround ;

justify-content : space-evenly ;

5. ALIGN-ITEMS ::

This property defines how items arranged across the cross axis in the container.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end ;
}

stretch (default) : stretch to fill the container (still respect min-width/max-width)

flex-start / start / self-start : items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

flex-end / end / self-end : items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

center: items are centered in the cross-axis. baseline : items are aligned such as their baselines align.

6. ALIGN-CONTENT ::

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;
}

gap, row-gap, column-gap :

gap:

The gap property sets the gaps between rows and columns.

row-gap:

The row-gap property sets the size of the gap between an element's rows.

column-gap:

The column-gap property sets the size of the gap between an element's columns.

Thankyou for reading the blog if you found it helpful do give it a thumbs up and please add your valuable inputs as well:-)

Rohini Polina

All about Flex Box-Quick guide