css - Flex Container

A Flex Container in CSS is the parent element that has display: flex or display: inline-flex applied to it.
Once you make an element a flex container, all of its direct children automatically become flex items, and you can control their layout using Flexbox properties.

1. Creating a Flex Container

To create a flex container, set the display property:

.container {
  display: flex;       /* Block-level flex container */
  /* display: inline-flex;  Inline-level flex container */
}

Example HTML:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

2. Properties of a Flex Container

There are six main properties you can apply to a flex container:

(A) flex-direction

Defines the main axis — the direction in which flex items are placed.

.container {
  flex-direction: row;          /* Default: left → right */
  flex-direction: row-reverse;  /* Right → left */
  flex-direction: column;       /* Top → bottom */
  flex-direction: column-reverse; /* Bottom → top */
}

Value	Items Placed	Main Axis
`row`	Left to right	Horizontal
`row-reverse`	Right to left	Horizontal
`column`	Top to bottom	Vertical
`column-reverse`	Bottom to top	Vertical

(B) flex-wrap

Controls wrapping when items don’t fit in one line.

.container {
  flex-wrap: nowrap;       /* Default: all items in one line */
  flex-wrap: wrap;         /* Wraps to the next line */
  flex-wrap: wrap-reverse; /* Wraps in reverse order */
}

(C) justify-content

Aligns items along the main axis (horizontal if row, vertical if column).

.container {
  justify-content: flex-start;    /* Default: items packed at start */
  justify-content: flex-end;      /* Items packed at end */
  justify-content: center;        /* Items centered */
  justify-content: space-between; /* Equal space between items */
  justify-content: space-around;  /* Equal space around items */
  justify-content: space-evenly;  /* Equal space everywhere */
}

(D) align-items

Aligns items along the cross axis (vertical if row, horizontal if column).

.container {
  align-items: stretch;     /* Default: fills full height */
  align-items: flex-start;  /* Aligns to top */
  align-items: flex-end;    /* Aligns to bottom */
  align-items: center;      /* Vertically centered */
  align-items: baseline;    /* Aligns based on text baseline */
}

(E) align-content

Aligns multiple rows along the cross axis (works only when flex-wrap: wrap).

.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch; /* Default */
}

(F) gap

Controls spacing between flex items without using margins.

.container {
  gap: 20px;          /* Adds 20px gap between items */
  row-gap: 10px;      /* Gap between rows only */
  column-gap: 15px;   /* Gap between columns only */
}

3. Complete Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      gap: 20px;
      background-color: #f2f2f2;
      padding: 20px;
    }
    .box {
      background-color: #4caf50;
      color: white;
      padding: 20px;
      font-size: 18px;
      text-align: center;
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
  </div>
</body>
</html>