What are the main properties of Flexbox (`display: flex`)—`justify-content`, `align-items`, `flex-direction`

Flexbox, or the Flexible Box Layout, is a CSS layout model that allows responsive alignment, distribution, and space management for items within a container. The main properties include:

1. justify-content

The `justify-content` property aligns flex items along the main axis of the container. It can take values like flex-start, flex-end, center, space-between, and space-around.

2. align-items

The `align-items` property aligns flex items along the cross axis. It can take values like flex-start, flex-end, center, baseline, and stretch.

3. flex-direction

The `flex-direction` property defines the direction in which flex items are placed in the flex container. It can take values like row, row-reverse, column, and column-reverse.

Example:

          .container {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
          }
          
          .item {
              flex: 1;
          }