Flexbox

FlexBox: as the name suggests it is a flexible box. It makes positioning much easier than normal methods.

Flexbox: It is a layout model, also known as the flexbox layout model particularly useful in building responsive designs with row or column layouts.

It is basically a container with the element with the property display: flex as the parent and all the direct children are the flex items

Terminologies is Flexbox :

• Parent: The element to which we assign the display property as flex is called the parent element.
• Child: The elements which are directly inside the parent element are called flex items.

Some Mostly Used Flexbox Properties :

• flex-direction: The flex-direction property specifies the direction of the flexible items. The default direction is row.It can also be changed to COLUMN.
• justify-content: display content with respect to the main axis

a.flex-end: will place the flex items at the end of the main axis

b.space-between: will provide space between items.No space around

the outside element

c.flex-start: will place the flex items at the start

d.space-around: will provide space between and around the outside element

• flex-grow: A number specifying how much the item will grow relative to the rest of the flexible items.
• flex-shrink: A number specifying how much the item will shrink relative to the rest of the flexible items.
• flex-basis: The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.
• gap: space between items.
• flex-wrap: is used for controlling the overflow from the container

overflow-when size of the item exceeds the flex box

• cross-axis : align-items with respect to the cross axis