What is flexbox in CSS and what are its properties?

Flexbox stands for flexible box and it was introduced around 2017 in CSS with the purpose of providing an efficient way to handle layouts, align elements within them and distribute spaces amongst the items in dynamic/responsive conditions. It provides an enhanced ability to alter the dimensions of the items and make use of the available space in the container efficiently. In order to achieve this, CSS3 provides some properties.

The properties of flexbox are as follows:

• flex-direction: This property helps in defining the direction the container should stack the items targetted for flex. The values of this property can be
  • row: Stacks items horizontally from left to right in the flex container.
  • column: Stacks items vertically from top to bottom in the flex container.
  • row-reverse: Stacks items horizontally from right to left in the flex container.
  • column-reverse: Stacks items vertically from bottom to top in the flex container.
• flex-wrap: This property specifies of the flex items should be wrapped or not. Possible values are:
  • wrap: The flex items would be wrapped if needed.
  • nowrap: This is the default value that says the items won’t be wrapped.
  • wrap-reverse: This specifies that the items will be wrapped if needed but in reverse order.
• flex-flow: This property is used for setting both flex-direction and flex-wrap properties in one statement.
• justify-content: Used for aligning the flex items. Possible values are:
  • center: It means that all the flex items are present at the center of the container.
  • flex-start: This value states that the items are aligned at the start of the container. This is the default value.
  • flex-end: This value ensures the items are aligned at the end of the container.
  • space-around: This value displays the items having space between, before, and around the items.
  • space-between: This value displays items with spaces between the lines.
• align-items: This is used for aligning flex items.
• align-content: This is used for aligning the flex lines.