How to Fix Flexbox Not Working in CSS

.container {
  /* Missing display: flex! */
  justify-content: center;
  align-items: center;
}

.container {
  display: flex; /* Must be present! */
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  /* Default: flex-direction: row (horizontal) */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

/* For vertical layout (column) */
.container {
  display: flex;
  flex-direction: column; /* Items stack vertically */
  justify-content: center; /* Now centers VERTICALLY */
  align-items: center; /* Now centers HORIZONTALLY */
}

/* Note: Axes swap with flex-direction! */

/* Wrong for centering both ways */
.container {
  display: flex;
  justify-content: center; /* Only centers horizontally */
}
/* Items are horizontally centered but not vertically */

/* Correct for centering both ways */
.container {
  display: flex;
  justify-content: center; /* Centers on main axis (horizontal) */
  align-items: center; /* Centers on cross axis (vertical) */
  height: 100vh; /* Need height for vertical centering */
}

.container {
  display: flex;
}
.item {
  flex: 1; /* Should shrink, but doesn't! */
}
/* Item with long text doesn't shrink below text width */

.container {
  display: flex;
}
.item {
  flex: 1;
  min-width: 0; /* Allow shrinking below content width */
}
/* Now item can shrink and text wraps properly */

/* Alternative for all children */
.container {
  display: flex;
}
.container > * {
  min-width: 0; /* Apply to all flex items */
}

.item {
  flex: 1; /* What does this actually do? */
}

/* Understanding the shorthand */
.item {
  flex: 1;
  /* Expands to: */
  flex-grow: 1;   /* Grow to fill space */
  flex-shrink: 1; /* Can shrink if needed */
  flex-basis: 0;  /* Start from 0 width */
}

/* Common patterns: */
.grow-only {
  flex: 1 0 auto; /* Grow, don't shrink, auto basis */
}
.no-shrink {
  flex: 0 0 auto; /* Fixed size, no grow/shrink */
}
.grow-shrink-equal {
  flex: 1 1 0; /* Same as flex: 1 */
}

.container {
  display: flex;
  /* Default: flex-wrap: nowrap */
}
/* Items get squished on narrow screens */

.container {
  display: flex;
  flex-wrap: wrap; /* Items wrap to new line */
}
.item {
  flex: 0 0 200px; /* Fixed width, wraps when needed */
  /* Or use min-width: */
  min-width: 200px;
}

.container {
  display: flex;
  align-items: flex-start; /* All items at top */
}
/* Want one item at bottom, but can't change align-items */

.container {
  display: flex;
  align-items: flex-start; /* Most items at top */
}
.special-item {
  align-self: flex-end; /* This one at bottom */
}
/* Or: */
.centered-item {
  align-self: center; /* This one centered */
}