/* flex-start: items at start of cross axis (default) -->
.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
}

<!-- Items aligned at top -->

/* flex-end: items at end of cross axis -->
.container {
  display: flex;
  align-items: flex-end;
  height: 200px;
}

<!-- Items aligned at bottom -->

/* center: items centered on cross axis (most common) -->
.container {
  display: flex;
  align-items: center;
  height: 200px;
}

<!-- Items centered vertically -->

/* stretch: items stretch to fill cross axis (default) -->
.container {
  display: flex;
  align-items: stretch;
  height: 200px;
}

.item {
  /* All items become 200px tall */
}

/* baseline: items aligned to their baselines -->
.container {
  display: flex;
  align-items: baseline;
  height: 200px;
}

<!-- Text-heavy items align to text baseline -->

/* Important: align-items applies to all items -->
.container {
  display: flex;
  align-items: center;
  height: 400px;
}

.item {
  /* All items centered, even with different heights */
}

<!-- Header with centered items -->
<header class="header">
  <div class="logo">Logo</div>
  <nav class="nav">Nav</nav>
  <button class="btn">Button</button>
</header>

.header {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: #f5f5f5;
}

<!-- All items (logo, nav, button) centered vertically -->

/* Card with stretched content -->
.card {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.card-header {
  flex: 0 0 auto;
  padding: 15px;
}

.card-content {
  flex: 1;
  align-items: stretch;  /* content fills width -->
}

.card-footer {
  flex: 0 0 auto;
  padding: 15px;
}

<!-- Content stretches to fill available space -->

/* Input with icon -->
.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

.icon {
  width: 20px;
  height: 20px;
}

input {
  flex: 1;
  border: none;
  outline: none;
}

<!-- Icon and input aligned to same baseline -->

/* Button row -->
.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button {
  padding: 10px 20px;
  height: 40px;
}

<!-- All buttons same height and aligned -->

<!-- With flex-direction: column, align-items works horizontally -->

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* items at left -->
  width: 400px;
}

<!-- Items stacked, aligned to left -->

.container {
  display: flex;
  flex-direction: column;
  align-items: center;  /* items centered horizontally -->
  width: 400px;
}

<!-- Items stacked, centered horizontally -->

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* items fill width -->
  width: 400px;
}

<!-- Items stacked, each takes full width -->

/* Centered column layout -->
.centered-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

<!-- All items centered horizontally -->

/* Sidebar layout -->
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  width: 250px;
  gap: 10px;
}

.sidebar-item {
  padding: 15px;
  background: #f5f5f5;
}

<!-- Items stretch to sidebar width -->

/* Both together for 2D alignment -->

/* Centered both ways -->
.container {
  display: flex;
  justify-content: center;  /* horizontal center -->
  align-items: center;      /* vertical center -->
  width: 400px;
  height: 200px;
}

<!-- Item centered perfectly -->

/* Space around with vertical alignment -->
.container {
  display: flex;
  justify-content: space-around;  /* horizontal distribution -->
  align-items: flex-start;         /* top alignment -->
  height: 200px;
  width: 600px;
}

<!-- Items at top, spread horizontally -->

/* Navbar: header between left/right, all centered -->
.navbar {
  display: flex;
  justify-content: space-between;  /* left and right spacing -->
  align-items: center;              /* vertical center -->
  height: 60px;
  padding: 0 20px;
}

<!-- Everything perfectly positioned -->

/* Column with centered items -->
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center -->
  align-items: center;       /* horizontal center -->
  width: 400px;
  height: 400px;
}

<!-- Item centered both ways -->

/* Gallery with even spacing and alignment -->
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center items horizontally -->
  align-items: flex-start;   /* align to top -->
  gap: 20px;
}

.gallery-item {
  width: 200px;
  height: 200px;
}