1. Display – Flex

Responsive CSS: Flexbox – What is Flexbox?
It is for how to distribute element across the screen, and it crate a flexible layout.
Flexbox properties.
1. Display – Flex :
Container and Items: To use display: flex, you first need a container element (often referred to as a flex container) and one or more child elements within it (referred to as flex items). The container is what you apply display: flex to.

2. Flex Direction: By default, when you apply display: flex, the container and its items become a row-oriented layout. This means the items flow horizontally in the order they appear in the HTML. However, you can change this using the flex-direction property. For example:

flex-direction: row (default): Items are arranged from left to right.

flex-direction: column: Items are stacked vertically from top to bottom.
flex-direction: row-reverse: Items are arranged from right to left.
flex-direction: column-reverse: Items are stacked vertically from bottom to top.
3. Justify Content: The justify-content property controls the alignment of items along the main axis (the primary direction of the flex container). For example:

justify-content: flex-start (default): Items align to the start of the main axis.

justify-content: flex-end: Items align to the end of the main axis.
justify-content: center: Items are centered along the main axis.
justify-content: space-between: Items are evenly spaced with the first item at the start and the last item at the end.
justify-content: space-around: Items are evenly spaced with equal space around them.
justify-content: space-evenly distributes the space evenly between flex items along the main axis while maintaining an equal amount of space before the first item and after the last item. This means that the space between adjacent items, as well as the space between the outermost items and the container's edges, will be the same.

1. Default Behavior (flex-wrap: nowrap): By default, when you use display: flex on a container, all the items inside that container try to fit on a single line. If there's not enough horizontal space, they will shrink to fit or overflow their container. This can sometimes lead to undesirable layouts.

2. flex-wrap: wrap: This value tells the flex items to wrap onto the next line if they can't fit on the current line due to limited horizontal space. It allows your items to stack vertically if necessary.

3. flex-wrap: wrap-reverse: Similar to flex-wrap: wrap, but it wraps items onto the next line in the reverse order, from the bottom to the top, if vertical space is limited.

The align-items property is used in a flex container to control how flex items are vertically aligned along the cross-axis. The cross-axis is the perpendicular axis to the main axis, which is determined by the flex-direction property. In other words it is space between rows or space between columns

Here are the main values of align-items:

align-items: stretch (Default): All flex items are stretched to fill the full height of the container along the cross-axis, making them equal in height.

align-items: flex-start: Flex items are aligned at the start of the cross-axis. If the main axis is horizontal, this aligns items to the top.

align-items: flex-end: Flex items are aligned at the end of the cross-axis. For a horizontal main axis, this aligns items to the bottom, and for a vertical main axis, it aligns items to the right.

align-items: center: Flex items are centered along the cross-axis. This means they are vertically or horizontally centered, depending on the flex-direction.

align-items: baseline: Items are aligned so that their baselines (where text sits) are aligned. This is useful when you have text elements of different sizes.
Align-content is a property applied to the container (the parent of the flex items) in a flexbox layout. Or in other words it is a spacing between rows and columns
It determines how multiple rows of flex items are aligned within the container along the cross-axis.
This property only comes into play when you have more than one row of flex items in your container. For instance, if your container is not wide enough to accommodate all items in a single row, flex items will wrap onto the next row. align-content controls the alignment of these rows relative to each other.
Think of it as controlling the space between rows of flex items.
Common values for align-content include:

flex-start: Aligns the rows at the start of the container.

flex-end: Aligns the rows at the end of the container.
center: Centers the rows vertically within the container.
space-between: Distributes the space evenly between the rows, with the first row at the start and the last row at the end.
space-around: Distributes the space evenly around the rows.