Flexbox:

-To display vertical elements in a horizontal manner we use flexbox.

-Flex is only applied to parent elements.

Flex-direction:

-Concerning the above article we arrange vertical elements horizontally but if we want to change the sequence or want to place such items in the center or space between them then we use flex-direction.

-By default flex-direction is row.

Following are the types and their uses of flex-direction.

1. Flex-direction:row;(By default)

2. Flex-direction: Column;

3. Flex-direction: column-reverse;

4. Flex-direction: row-reverse;

• Flex-direction: Column;

  %[codepen.io/pashupati1999/pen/abjNGoV]

• Flex-direction: column-reverse;

• Flex-direction: row-reverse;

  %[codepen.io/pashupati1999/pen/PoBNOjy]

Position:

-To move elements to a particular place we use positions.

Following are the types of positions.

• Absolute position

• Relative position

• sticky position

• static position

Absolute position:-

-Absolute position behavior based on parent position.

-Here the container is the parent and the div is a child so the div is adjusting value based on its parent.

-Media query is not used, so output varies on the below codepen screen.

-For better understanding use 0.5x.

Relative-position:-

• In relative position div (child) behaves from its original position.

• It behaves from its relative position.

• -Media query is not used, so output varies on the below codepen screen.

• For better understanding use 0.5x

  %[codepen.io/pashupati1999/pen/QWBNmae]

Fixed-position:

-It is not changing its position irrespective of webpage scrolling.

-It holds its original position.

-Media query is not used, so output varies on the below codepen screen.

-For better understanding use 0.5x

Sticky-position:

-If we scroll down the web page the sticky content stick to the web page on a specific place which is given by the developer.

-Media query is not used, so output varies on the below codepen screen.

-For better understanding use 0.5x