What is CSS Flex Box?

• The flexbox in CSS is a one-dimensional layout model, which provides an easy & clean way to arrange items within a container.

• As the name suggests, flexbox is all about flexibility. We can control whether items grow or shrink, how the extra space is distributed and more.

• Flexbox is useful for creating small-scale layouts & is responsive and mobile-friendly.

Flexbox Axes:-

Flexbox operates in a 2 axes system: a main and a cross-axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross-axis is very simple, it's in the direction that's perpendicular to your main axis.

Flexbox properties:-

• flex-direction:-

.box{
    display: flex;
    flex-direction: column | row | row-reverse | column-reverse;
}

• justify-content:-

It controls the alignment of all items on the main axis.

.box{
    display: flex;
    justify-content: center | end | flex-start | flex-end | left | right | space-around | space-between | space-evenly;
}

• align-items:-

It controls the alignment of all items on the cross-axis.

.box{
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}