CSS Flexbox: Complete Guide to display: flex Container Properties and Layout Control

Key Flexbox Concepts:

• Flex Container: The parent element with display: flex
• Flex Items: Direct children of the flex container
• Main Axis: Primary axis along which flex items are arranged
• Cross Axis: Perpendicular axis to the main axis

.container {
  display: flex;
}

/* Alternative inline-flex for inline behavior */
.inline-container {
  display: inline-flex;
}

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

.container {
  display: flex;
  justify-content: flex-start;    /* Default: start of container */
  justify-content: flex-end;      /* End of container */
  justify-content: center;        /* Center of container */
  justify-content: space-between; /* Equal space between items */
  justify-content: space-around;  /* Equal space around items */
  justify-content: space-evenly;  /* Equal space everywhere */
}

justify-content: center

justify-content: space-between

.container {
  display: flex;
  align-items: stretch;    /* Default: stretch to fill container */
  align-items: flex-start; /* Align to start of cross axis */
  align-items: flex-end;   /* Align to end of cross axis */
  align-items: center;     /* Center on cross axis */
  align-items: baseline;   /* Align to text baseline */
}

align-items: center

.container {
  display: flex;
  flex-wrap: nowrap;      /* Default: items stay on one line */
  flex-wrap: wrap;        /* Items wrap to new lines */
  flex-wrap: wrap-reverse; /* Items wrap in reverse order */
}

flex-wrap: wrap

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;      /* Default: stretch lines */
  align-content: flex-start;   /* Pack lines to start */
  align-content: flex-end;     /* Pack lines to end */
  align-content: center;       /* Center lines */
  align-content: space-between; /* Space between lines */
  align-content: space-around; /* Space around lines */
}

/* Instead of writing both properties separately */
.container {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Use the shorthand */
.container {
  flex-flow: row wrap;
}