How to use flexbox for layout of elements on a page?

Flexbox (or Flexible Box Layout) is a CSS module designed for creating flexible layouts of elements within a container, allowing easy distribution of space and alignment of items, even when their sizes are unknown or change dynamically.

The main concept of Flexbox is the flex container and its flex items.

Properties for Flex container (display: flex;):

• flex-direction: Defines the direction of flex items in the container (main axis).

  • row (default): horizontal, left to right.
  • row-reverse: horizontal, right to left.
  • column: vertical, top to bottom.
  • column-reverse: vertical, bottom to top.

• flex-wrap: Determines whether flex items wrap onto a new line if they do not fit in one line.

  • nowrap (default): all items in one line.
  • 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.

  • flex-start (default): align at the start.
  • flex-end: align at the end.
  • center: center.
  • space-between: distribute with space between.
  • space-around: distribute with space around.
  • space-evenly: distribute with equal space around and between.

• align-items: Aligns flex items along the cross axis (perpendicular to main).

  • stretch (default, if no height/width set): stretch to fill.
  • flex-start: align at the start.
  • flex-end: align at the end.
  • center: center.
  • baseline: align along the text baseline.

• align-content: Aligns lines of flex items when wrapping occurs (flex-wrap: wrap). Similar to justify-content but for the cross axis.

  • stretch (default): stretch lines.
  • flex-start: align at the start.
  • flex-end: align at the end.
  • center: center.
  • space-between: distribute lines with space between.
  • space-around: distribute lines with space around.

• gap, row-gap, column-gap: Sets gaps between flex items (single value or separate for rows and columns).

.flex-container {
  display: flex; /* Makes the element a flex container */
  flex-direction: row; /* Items laid out horizontally */
  flex-wrap: wrap; /* Items wrap onto new lines */
  justify-content: center; /* Items centered along main axis */
  align-items: center; /* Items centered along cross axis */
  gap: 10px; /* 10px gap between flex items */
}

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

• order: Determines the order of flex items (default 0). Items with smaller values appear first.

• flex-grow: Defines how much a flex item can grow relative to others, occupying available space. Default 0.

• flex-shrink: Defines how much a flex item can shrink when space is limited. Default 1.

• flex-basis: Sets the initial size of the flex item before free space is distributed. Can be in px, %, rem, auto, etc. (default auto).

• flex: Shorthand for flex-grow, flex-shrink, and flex-basis (e.g., flex: 1 1 0;).

• align-self: Overrides align-items for individual flex items, accepting same values.

.flex-item {
  order: 2; /* This item will appear second, regardless of HTML order */
  flex-grow: 1; /* This item will take remaining space */
  flex-shrink: 0; /* This item will not shrink */
  flex-basis: 100px; /* Base size of 100px */
  align-self: flex-start; /* Align this item at the start of cross axis */
}

.another-item {
  flex: 1 1 auto; /* shorthand for grow: 1, shrink: 1, basis: auto */
}

Flexbox enables creating various layouts, from simple alignments to more complex responsive structures, managing space distribution and element alignment within the container.