CSS flexbox

What is CSS Flexbox?

• CSS Flexbox is a CSS layout module that is used to arrange

and organize items on web pages in one direction, i.e.,
horizontally and vertically.

• CSS Flexbox helps in

creating flexible and responsive layouts where we can adjust
the flex items within the flex container.

• It is used to fill the extra space available or shrink the size of

the content if it is overflowing.
Basics and Terminology of CSS Flexbox
 Flexbox is not a property. It is a CSS layout module that has lots of its properties, for example, flex-
direction, which helps in aligning the items in a particular direction that we want.

 Flex Container - Flex container is used as a container for the flex-items. To make the container flexible,
we set the display property as flex.
 Main Axis - The main axis is used as a primary axis for the flex-container to align the flex-items. It is
set using the flex-direction property.
 Cross Axis - It is always perpendicular to the main axis. It arranges itself as per the main-axis direction
CSS Positions