Flexbox; Introduction, properties and its uses..

Flexbox!

Flexbox is a CSS layout mode that makes it easier to design flexible and responsive layouts.

Uses of flexbox:

Navigation bars:
Flexbox is great for creating responsive navigation bars that adapt to different screen sizes.

Responsive design:
Flexbox is a powerful tool for creating responsive designs.

Basic Properties

1. display: flex_: Sets a container as a flex container.
2. flex-direction_: Specifies the direction of flex items (e.g., row, column).
3. justify-content_: Specifies how flex items are justified within a flex container.
4. align-items_: Specifies how flex items are aligned within a flex container.

It is easy to use, flexible, responsive and efficient.

What I understood by Flexbox..

Flexbox is used to achieve responsiveness, it is a layout model used to arrange elements in a flexible manner, flexbox enables you to give further styling to your HTML elements using these basic properties;

Display-flex
Flex-Direction (which is row by default)
Justify-content
Align-items

Flexbox properties can work only when display:flex is launched. Its elements are oriented to the row dimension by default. This can be chosen if it's the desired dimension.

Flexbox works on two concepts; Flex container and flex item.

Therefore, Flexbox is used to add more styles to your HTML.

CSS Positioning:

Types of CSS Positioning;

1. Position Static: It helps you to use margin and padding in an element.
2. Position Relative: Elements are relative to their natural position.
3. Position Absolute: Elements are positioned relative to their nearest positioned parent.
4. Position Fixed: Elements are positioned relative to the viewport.
5. Position Sticky: Elements are positioned based on the scroll bar.

Key Properties for CSS Positioning are:

1. Position : Specifies the type of positioning.
2. Top, Right, Bottom, Left: Specify the offset from the respective edge.
3. Z-index : It is a CSS property that allows you to control the position of an element on the z axis.

Most use of positioning is for Responsive design, using relative positioning to create responsive layouts.

Difference between CSS position Static and position relative, Position Static cannot be used with ( Top, Bottom, left and right) but we can use it for Position relative..

In conclusion, let me emphasize on Block level elements and inline elements: They are those elements that take up the full width of the webpage while the inline element takes up the space that it needs..