flexbox 📤📥

Flexbox is a layout method that helps to arrange the HTML elements in rows (horizontally)➡️ or columns (vertically)⬇️

flexbox properties:

Providing display property with the value flex converts the element into a Flex Container. and child elements will become flex-items.

div {

display: flex;

}

--{we specify the main-axis direction with the flex-direction property.

(the main axis depends on flex-direction )

flex-direction : row || column;

note: flex-direction will be in row direction by default.}

-- {justify-content property specifies the alignment of flex items along the main axis.

justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-around;

justify-content:space-between;

justify-content: space-evenly;

justify-content flex-items in the main axis.}

{

align-items: flex-start;

align-items: baseline;

align-items: center;

align-items: flex-end;

align-items: stretch;

align-items flex-items in the cross-axis.}

--{flex-wrap property is used when there are multiple elements forced to stay each other side by side in a single row or column.

we can use flex-wrap to adjust automatically according to the width in multiple rows or columns.

note : flex-wrap has a default value is no wrap.

flex-wrap: nowrap;

flex-wrap: wrap; }

--{when we have multiple lines of elements when wrapping flex items then we can use align-content. The values are similar to justify-content.

note: align-content works in the cross-axis.}

--{ flex-grow is another property that is used for flex-items to distribute the flex-item if there is enough space left.

note: flex-grow takes unitless value.

flex-grow:1; 2|| 3 etc..

}

--{ flex-shrink is another property that is used for flex-items to shrink much faster compared to other flex-items.

note: flex-shrink also takes unitless value.

flex-shrink:1; || 2 || 3 etc..

--{we can also adjust content within a limit by adding the overflow property can see all the content within the limited height and width of the container.

note: visible is the default value

overflow: visible;

overflow:scroll:

overflow:auto; (adjusts automatically x or y direction)

OR we can add a scroll to the specific direction that we've to use overflow-x and overflow-y properties.}

--{Gap property used to give a distance between each element.

div{

gap:10px

}

-- {There is an order property to adjust the position of the flex item at a specific position in the flex-container.

note: order property has 0 as a default value

order:1 || 2 || etc...

note: order property used for flex-items to order the position of the item in the flex container.

the flex items will be ordered in ascending order.}

--{Align-self is another property that is used to align items individual flex-item in the cross-axis direction.

note:align-self: auto is the default value. and then the value of auto will be inherited from the align-items value (container).

align-self accepts the same values as align-items.}

<<That's all for this blog thanks for reading>>