Hello Everyone, hope you all are doing well. Today in this article we will learn about FlexBox. so let's first understand what is flexbox?

What is FlexBox?

• FlexBox is a box model in CSS which allows the developer to design the web page more faster and conveniently

• Flex Box allows the developer to align the items on the web page either in the horizontal direction (left-to-right) or in the vertical direction(top-down)

• With the help of FlexBox, we can design the webPage more efficiently by breaking the webPage into rows and columns and then building them using the flexbox

• As you can in image 1 we have divided the web page into 2 equal columns.

• 1st Column consists of 3 rows and 2nd column has an image

• With this approach, we can easily design any web page.

How to use Flex Box?

• To work with FlexBox we need to set the property of display to flex

  display: flex

• By setting the property of display flex, we can access all the features of flexbox

  • All the flex properties with default values are applied to the container and its direct children

  • By using display Flex All the items we get align side by side

Example

   div {
        display: flex;
      }

• By setting the property of display flex, all 4 boxes are aligned side by side

• By applying display: flex, we can use various display properties like:

  • flex-direction

  • justify-content

  • align-items

  • Flex-Wrap

  • Align-Content

  • Order

Flex-Direction:

• Flex-Direction allows the developer to arrange the items in row or column

• By default the flex Direction is ROW

• The developer can change The Flex-Direction to Row, row-reverse, column, column-reverse

flex-direction: row | column | row-reverse | column-reverse

• In the above image 1st, we have set the flex direction to row.

  • 2nd-time flex-direction: row-reverse

  • 3rd-time flex-direction: column

  • 4th-time flex-direction: column-reverse

Justify-Content:

• Justify-Content is one of the most used properties in FlexBox

• It is used to align or manage the space between the items

• By-Default its property is set to justify-content: flex-startwhich means items should be aligned to left

• Be Cautions while using justify-Content because flex-direction has a direct impact on justify-content

justify-content: flex-start | flex-end | center | space-between | space-around

• justify-content: flex-Start will align the content toward the start of the page/left side

• justify-content:flex-End will align the content towards the end of the page/right side

• justify-content:flex-center will align the content toward the center of the page/center

• justify-content:space-between will distribute space evenly between the items, and all items will be separated by equal space

• justify-content:space-aroundaccomplishes the same thing except that the first and last items have no space toward the container's boundary.

• justify-content:space-evenlywill distribute space evenly between the items, now all the nodes will have the same space on both sides including the first and last item

Align-Items:

• Align-Items is one of the most used properties in FlexBox

• It is used to align or manage the space between the items

• align-items is the same as justify-content only for the cross-axis.

• If the main axis is horizontal, the cross axis is vertical (top-to-bottom)

• if the main axis is vertical, the cross axis is horizontal (left-to-right).

• align-items: flex-start | flex-end | center are self-explanatory and baseline is useful if you want your item's text content to be aligned.

• align-items: flex-start items are aligned toward the top of the page

• align-items: flex-end items are aligned toward the end of the page

• align-items: flex-centeritems are aligned toward the center of the page

• But Always remember it is based on MAIN Axis

Flex-Wrap:

• In this instance, all the flex items have explicit widths set to 30%.

• If there are more than three things in the container, we would ordinarily expect the fourth item to overflow or break into the following row.

• flex-wrap is set to wrap, the fourth item becomes a second row as the width increase

• flex-wrap is set to no-wrap, the fourth item remains in its place only

• flex-wrap is set to wrap-reverse, it reverses the wrap

Align Item:

• align-items is the same as justify-content only for the cross-axis.

• If the main axis is horizontal, the cross axis is vertical (top-to-bottom), if the main axis is vertical, the cross axis is horizontal (left-to-right).

• align-items: flex-start | flex-end | center are self-explanatory and baseline is useful if you want your item's text content to be aligned.

Thanks, for reading the Article, Please give your valuable Feedback