CSS Flexbox


Flexbox, also known as the flexible box model in CSS, is a one-dimensional layout paradigm that allows for simple and orderly arrangement of elements inside of containers. It offers flexible and effective layouts with distributed spaces between objects to regulate their alignment structure. Flexbox is mobile-friendly and responsive, making it handy for designing small-scale layouts.

Flexbox characteristics: 

  • There is a lot of flexibility offered.
  • Alignment and arrangement of the items.
  • Proper distances.
  • Items are in order and in sequence.
  • Flex layout is created on top of Bootstrap 4.

We had 4 layout modes prior to the flexbox model:

  • Block: It is used to divide web pages into sections.
  • Inline: Text is placed within it.
  • Table: Two-dimensional table data are employed in it.
  • Positioned: It is used to specify an element's explicit position.

Example

Preview