How to set properties of flexbox?

Properties are set for the container (the element to which display: flex or display: inline-flex is applied) and its direct children (elements inside the container).

Properties for the container:

• display: Defines that the element is a flex container. Possible values: flex (block) and inline-flex (inline).
• flex-direction: Sets the direction of the main axis along which flex items are laid out. Possible values: row (default, left to right), row-reverse (right to left), column (top to bottom), column-reverse (bottom to top).
• flex-wrap: Controls wrapping of flex items onto a new line if they overflow the container. Possible values: nowrap (default, no wrapping), wrap (wrap onto a new line), wrap-reverse (wrap onto a new line in reverse order).
• justify-content: Aligns flex items along the main axis. Possible values: flex-start (start of container), flex-end (end of container), center, space-between (even space between items, first at start, last at end), space-around (even space around each item).
• align-items: Aligns flex items along the cross axis. Possible values: stretch (default, stretch to fill container height), flex-start (start of container on cross axis), flex-end (end of container on cross axis), center, baseline (align to text baseline).
• align-content: Aligns lines of flex items (when flex-wrap is used) along the cross axis. Does not apply if only one line. Possible values: stretch (default), flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Sets the spacing between flex items along the main and cross axes.

Properties for the items (direct children of the flex container):

• order: Determines the order of the element within the container. Default is 0. Items with lower order appear first.
• flex-grow: Determines how much the item can grow relative to others when there is free space. Default is 0 (does not grow).
• flex-shrink: Determines how much the item can shrink when space is limited. Default is 1 (shrinks).
• flex-basis: Sets the initial size of the item before free space is distributed. Can be in pixels, percentages, or auto. Default is auto.
• flex: Shorthand for flex-grow, flex-shrink, and flex-basis. For example, flex: 1 1 auto;.
• align-self: Overrides align-items for an individual item. Possible values: auto (uses parent's align-items), stretch, flex-start, flex-end, center, baseline.

Example:

.flex-container {
  display: flex; /* Make the element a flex container */
  flex-direction: row; /* Arrange items in a row */
  justify-content: center; /* Center items along the main axis */
  align-items: center; /* Center items along the cross axis */
  gap: 10px; /* Set spacing between items */
}

.flex-item {
  flex-grow: 1; /* Item can grow */
  flex-basis: 100px; /* Initial size of the item */
}

.special-item {
  order: -1; /* This item will be placed first */
  align-self: flex-end; /* Override cross axis alignment for this item */
}