<!-- Flexbox within flexbox -->
<div class="page">
  <header class="header">Header</header>
  <main class="main">
    <nav class="sidebar">Nav</nav>
    <article class="content">Content</article>
  </main>
  <footer class="footer">Footer</footer>
</div>

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

.main {
  flex: 1;
  display: flex;
  gap: 20px;
}

.sidebar {
  flex: 0 0 250px;
  overflow-y: auto;
}

.content {
  flex: 1;
  min-width: 0;
}

.footer {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

<!-- Nested flex creates complex layouts without grid -->

/* Card with nested flex -->
.card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.card-title {
  flex: 1;
}

.card-actions {
  display: flex;
  gap: 5px;
}

.card-body {
  flex: 1;
  overflow-y: auto;
}

<!-- Use margin: auto to space items -->
<div class="toolbar">
  <button>Undo</button>
  <button>Redo</button>
  <div class="spacer"></div>
  <button>Save</button>
  <button>Share</button>
</div>

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

.spacer {
  flex: 1;
  /* Takes all remaining space -->
}

<!-- Alternative: auto margin -->
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.save {
  margin-left: auto;
  /* Pushes to right -->
}

<!-- Both buttons on left, both on right -->
[Undo] [Redo]   [Save] [Share]

/* Auto margin in flex -->
.center {
  margin: auto;
  /* Centers item in flex container -->
}

.push-right {
  margin-left: auto;
  /* Pushes item to right -->
}

.push-down {
  margin-top: auto;
  /* Pushes item down in column flex -->
}

<!-- Mix different flex values for specific layouts -->
<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Content</main>
  <aside class="secondary">Secondary</aside>
</div>

.layout {
  display: flex;
  gap: 20px;
}

.sidebar {
  flex: 0 0 250px;        /* fixed width -->
}

.content {
  flex: 1;                /* grows to fill -->
}

.secondary {
  flex: 0 1 200px;        /* shrinks if needed, max 200px -->
}

<!-- [250px fixed] [grows] [shrinks] -->

/* Different flex ratios -->
.container {
  display: flex;
}

.primary {
  flex: 2;  /* takes 2/3 -->
}

.secondary {
  flex: 1;  /* takes 1/3 -->
}

<!-- 66% and 33% distribution -->

/* Min/max with flex -->
.item {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

<!-- Gallery with flex and aspect ratio -->
<div class="gallery">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery img {
  flex: 1 1 200px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

<!-- Images square, flexible sizing, consistent spacing -->

/* Responsive gallery without media queries -->
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.gallery img {
  flex: 1 1 clamp(150px, 25vw, 400px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

<!-- Images scale smoothly with viewport -->

<!-- Smooth flex transitions -->
.item {
  flex: 1;
  transition: flex 0.3s ease, transform 0.3s ease;
}

.item:hover {
  flex: 1.2;  /* grows on hover -->
  transform: translateY(-2px);
}

<!-- Expand/collapse with flex -->
.sidebar {
  flex: 0 0 250px;
  overflow: hidden;
  transition: flex 0.3s ease;
}

.sidebar.collapsed {
  flex: 0 0 50px;
  /* Sidebar shrinks to 50px -->
}

<!-- Smooth width change without layout thrashing -->

/* Flex with visibility toggle -->
.panel {
  flex: 0 1 300px;
  transition: flex 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.panel.hidden {
  flex: 0 0 0;
  opacity: 0;
  /* Panel collapses smoothly -->
}

<!-- Sticky sidebar with flex -->
.page {
  display: flex;
  gap: 20px;
}

.sidebar {
  flex: 0 0 250px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.content {
  flex: 1;
  min-width: 0;
}

<!-- Split pane layout -->
.panes {
  display: flex;
  height: 100vh;
  gap: 10px;
}

.pane {
  flex: 1;
  overflow: auto;
  border: 1px solid #ddd;
}

<!-- Justified button layout -->
.button-group {
  display: flex;
  gap: 0;
}

.button {
  flex: 1;
  padding: 10px;
  border: none;
  border-right: 1px solid #ddd;
}

.button:last-child {
  border-right: none;
}

<!-- Fill and expand with flex -->
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.auto-expand {
  flex: 1;
  overflow-y: auto;
}