Defination:

Flexbox, or the Flexible Box Layout, is a layout model in CSS that provides an efficient way to design complex layouts with a more predictable and powerful alignment of items within a container. It’s particularly useful for creating dynamic and responsive user interfaces. Flexbox allows you to distribute space along a single axis (either horizontally or vertically) and automatically adjusts the size and position of elements within a container.

Mainly flexbox properties divided into two Categories.:

1. Container Properties

  • display: flex;
  • flex-direction
  • justify-content
  • align-items
  • align-content
  • flex-wrap
  • flex-flow

 

2. Item properties

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • order
  • align-self