<!-- Container sets alignment for all items -->
.container {
  display: flex;
  align-items: center;  /* all items centered -->
  height: 200px;
}

.item {
  /* All items center by default */
}

<!-- [centered] [centered] [centered] -->

/* One item breaks alignment -->
.item.top {
  align-self: flex-start;
  /* This item goes to top, others stay centered */
}

.item.bottom {
  align-self: flex-end;
  /* This item goes to bottom */
}

.item.stretch {
  align-self: stretch;
  /* This item stretches full height */
}

<!-- [centered] [top] [bottom] -->

/* align-self values -->
.top {
  align-self: flex-start;
}

.bottom {
  align-self: flex-end;
}

.center {
  align-self: center;
}

.stretched {
  align-self: stretch;
}

.baseline {
  align-self: baseline;
}

/* auto restores container alignment */
.item.default {
  align-self: auto;  /* uses container's align-items -->
}

<!-- Card with footer -->
<div class="card">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.card {
  display: flex;
  flex-direction: column;
  height: 300px;
  border: 1px solid #ddd;
}

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

.content {
  flex: 1;
  padding: 15px;
}

.footer {
  flex: 0 0 auto;
  padding: 15px;
  margin-top: auto;  /* or align-self: flex-end -->
  background: #f5f5f5;
}

<!-- Footer always at bottom -->

/* Form with mixed alignment -->
.form-row {
  display: flex;
  align-items: center;  /* default center alignment -->
  gap: 15px;
  margin-bottom: 15px;
}

.form-label {
  flex: 0 0 150px;
}

input {
  flex: 1;
}

.help-text {
  flex: 0 0 auto;
  font-size: 12px;
  align-self: flex-start;  /* override to top -->
}

<!-- Label/input centered, help text at top -->

/* Navbar with mixed heights -->
.navbar {
  display: flex;
  align-items: center;  /* default center -->
  gap: 20px;
  padding: 15px;
}

.logo {
  flex: 0 0 auto;
  font-size: 24px;
  align-self: flex-start;  /* logo at top -->
}

.nav {
  flex: 1;
  display: flex;
  gap: 10px;
}

.search {
  flex: 0 0 auto;
  align-self: stretch;  /* search full height -->
}

<!-- Logo at top, search stretched -->

/* Grid of items with varied alignment -->
.gallery {
  display: flex;
  align-items: flex-start;  /* default top alignment -->
  gap: 20px;
}

.image {
  flex: 0 0 200px;
  height: 200px;
}

.featured {
  align-self: stretch;  /* featured image full height -->
  flex: 0 0 400px;
  height: auto;
}

<!-- order changes visual sequence without changing HTML -->
<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

.container {
  display: flex;
}

.first {
  order: 1;  /* displays second -->
}

.second {
  order: 3;  /* displays third -->
}

.third {
  order: 2;  /* displays second -->
}

<!-- HTML: First, Second, Third -->
<!-- Visual: First, Third, Second -->

/* Default order is 0 -->
.item {
  order: 0;  /* displays in HTML order -->
}

/* Negative order comes first -->
.item.priority {
  order: -1;  /* displays before order 0 items -->
}

/* Reordering mobile layouts -->
.container {
  display: flex;
  flex-direction: column;
}

.header {
  order: 1;
}

.main {
  order: 2;
}

.sidebar {
  order: 3;
}

/* All display in order 1, 2, 3 sequence -->

<!-- Mobile-first with order reordering -->
<div class="page">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Content</main>
  <nav class="nav">Nav</nav>
</div>

/* Mobile: nav first, then sidebar, then content */
.sidebar {
  order: 2;
  flex: 1 1 100%;
}

.content {
  order: 3;
  flex: 1 1 100%;
}

.nav {
  order: 1;
  flex: 1 1 100%;
}

/* Desktop: sidebar, content, nav */
@media (min-width: 768px) {
  .page {
    flex-direction: row;
  }

  .sidebar {
    order: 1;
    flex: 0 0 250px;
  }

  .content {
    order: 2;
    flex: 1;
  }

  .nav {
    order: 3;
    flex: 0 0 200px;
  }
}

<!-- HTML stays same, visual order changes -->

/* Priority-based ordering -->
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo.completed {
  order: 2;  /* completed items below -->
}

.todo.active {
  order: 1;  /* active items above -->
}

.todo.priority {
  order: 0;  /* priority items at top -->
}

<!-- Visually reordered by status -->

/* Icon before or after text without changing HTML -->
<div class="button">
  <span class="icon">→</span>
  <span class="text">Click me</span>
</div>

.button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  order: 2;  /* icon on right -->
}

.text {
  order: 1;  /* text on left -->
}

/* Or reverse for different button style */

/* Responsive form layout */
.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.label {
  flex: 0 0 100%;  /* full width on mobile -->
  order: 1;
}

input {
  flex: 0 0 100%;
  order: 2;
}

.help {
  flex: 0 0 100%;
  order: 3;
}

@media (min-width: 600px) {
  .label {
    flex: 0 0 200px;
    order: 1;
  }

  input {
    flex: 1;
    order: 2;
  }

  .help {
    flex: 0 0 100%;
    order: 3;
  }
}

<!-- Layout changes with viewport -->

<!-- Use both for complex layouts -->
<div class="hero">
  <h1>Title</h1>
  <p>Description</p>
  <button>CTA</button>
</div>

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 400px;
}

h1 {
  order: 1;
  align-self: flex-start;  /* top-left -->
}

p {
  order: 2;
  align-self: center;  /* centered -->
}

button {
  order: 3;
  align-self: flex-end;  /* bottom-right -->
  margin-top: auto;
}

<!-- Complex positioning with order and align-self -->

/* Drawer with custom alignment -->
.drawer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 auto;
  padding: 20px;
}

.content {
  flex: 1;
  overflow-y: auto;
  align-self: stretch;
}

.footer {
  flex: 0 0 auto;
  padding: 20px;
  align-self: stretch;
  background: #f5f5f5;
}