CSS flexbox basics

This lesson will help you understand the basics of Flexbox layout which provides a more efficient way to design flexible responsive layout structure.

Quick Hands-on

Points to Remember

• The flexbox provides a more efficient way to design flexible responsive layout structure without using float or positioning.

• It effectively manages the layout, alignment and distribute the space among items in a container, even when their size is unknown and or dynamic.

• The flexbox layout is direction agnostic i.e it is free from any direction constraints. Whereas, the regular layouts like block is vertically-based and inline is horizontally based.

• To start using flexbox, we need to specify the display property as “flex” to the element which basically creates a “flex container”.

• All the direct elements of the flex are known as “flex items”.

• The flexbox layout is based on “flex-flow” directions.

• The items will be placed following either in the main axis or the cross axis.
  • Main axis: The main axis of a flex container is the primary axis along which the flex items are laid out.
  • Cross axis: The axis which is perpendicular to the main axis is called Cross axis. Its direction depends on the main axis direction.