Introduction to CSS Flex Box

Introduction to CSS Flex Box. Flex box is a layout model for making efficient layouts for web design. It controls alignment and distribute proper space among items.

Use of Flex box

Using flex box provides us the following benefits.

  • alignment
  • proper spacing
  • item arrangement
  • order of items


Flex box is divided in two parts

  • Flex container
  • Flex items

There are two axis known as flex axis. These are

  • Main axis
  • Cross axis

Axis start from main-start and end at main-end. From main-start to main-end, it is known as main-size.

flex box arrangement
flex box arrangement

View more proper image here.

Flex-box is a study of properties of flex-container and flex-item.

In the next, tutorial we will study the properties of flex-container.

Leave a Reply