<!-- flex-basis sets initial size -->
.container {
  display: flex;
  width: 600px;
  gap: 0;
}

.item {
  flex-basis: 100px;  /* starts at 100px -->
  flex-grow: 1;        /* grows from there -->
}

<!-- [200px] [200px] [200px] (grows equally from 100px base) -->

/* flex-basis vs width -->
.item-with-basis {
  flex-basis: 200px;  /* flex-specific starting size -->
}

.item-with-width {
  width: 200px;  /* fixed width (overridden by flex) -->
}

/* In flex container, flex-basis takes priority over width */

/* flex-basis: auto (default) -->
.container {
  display: flex;
}

.item {
  flex-basis: auto;  /* uses content size or width -->
}

<!-- Size based on content -->

/* flex-basis: 0 for equal distribution -->
.container {
  display: flex;
  width: 600px;
  gap: 0;
}

.item {
  flex: 1 1 0;  /* flex-basis: 0 -->
}

<!-- [200px] [200px] [200px] all equal from zero -->
<!-- Different from flex-basis: auto which respects content size -->

/* flex-basis with percentage -->
.container {
  display: flex;
  width: 600px;
  gap: 0;
}

.item {
  flex-basis: 50%;  /* starts at 50% of container -->
}

<!-- [300px] [300px] -->

/* Mixing flex-basis values -->
.item-fixed {
  flex-basis: 200px;  /* fixed starting point -->
}

.item-flex {
  flex-basis: 0;  /* flexible from zero -->
}

.item-auto {
  flex-basis: auto;  /* content-based -->
}

<!-- flex shorthand: grow shrink basis -->
.item {
  flex: 1 1 200px;
  /* Equivalent to: -->
  /* flex-grow: 1 -->
  /* flex-shrink: 1 -->
  /* flex-basis: 200px -->
}

/* Common shorthand patterns -->

.grow {
  flex: 1;  /* flex: 1 1 0% (equal-width default) -->
}

.no-grow {
  flex: 0;  /* flex: 0 1 auto (content-sized) -->
}

.fixed {
  flex: none;  /* flex: 0 0 auto (fully fixed) -->
}

.with-basis {
  flex: 1 1 200px;  /* grow, shrink, min 200px -->
}

.grow-no-shrink {
  flex: 1 0 200px;  /* grow from 200px but don't shrink -->
}

/* Shorthand forms -->
.single-value {
  flex: 2;  /* flex: 2 1 0% (just grow factor) -->
}

.two-values {
  flex: 1 2;  /* flex: 1 2 0% (grow and shrink) -->
}

.three-values {
  flex: 1 2 200px;  /* grow, shrink, and basis -->
}

<!-- Right way: use flex-basis for flex items -->
.container {
  display: flex;
  width: 600px;
}

.item {
  flex: 1 1 200px;  /* flex-basis: 200px -->
  /* width is ignored in flex context */
}

<!-- Good: flex property controls everything -->

/* Wrong way: using width with flex -->
.item {
  width: 200px;  /* this gets ignored -->
  flex: 1;       /* flex-basis: 0 overrides it -->
}

<!-- Confusing: width is ignored, flex-basis wins -->

/* Practical examples -->

/* Two-column: sidebar + content -->
.layout {
  display: flex;
  gap: 20px;
}

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

.content {
  flex: 1;  /* takes remaining space, grows from 0 -->
}

<!-- [300px fixed] [rest of space] -->

/* Three-column with different ratios -->
.container {
  display: flex;
  gap: 20px;
}

.col-1 {
  flex: 1 1 200px;  /* min 200px, grows 1 unit -->
}

.col-2 {
  flex: 2 1 400px;  /* min 400px, grows 2 units -->
}

.col-3 {
  flex: 1 1 200px;  /* min 200px, grows 1 unit -->
}

<!-- Each has minimum, different growth rates -->

/* Wrapping grid -->
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 250px;  /* min 250px, grows to fill, wraps -->
}

<!-- Items at least 250px, wrap when constrained -->

<!-- flex-basis: 0 (equal distribution) -->
.container {
  display: flex;
  width: 600px;
  gap: 0;
}

.item {
  flex: 1 1 0;  /* flex-basis: 0 -->
}

<!-- [200px] [200px] [200px] exact equal division -->

/* flex-basis: auto (content-aware) -->
.container {
  display: flex;
  width: 600px;
  gap: 0;
}

.item {
  flex: 1 1 auto;  /* flex-basis: auto -->
}

.item:nth-child(1) {
  content: "Short";
}

.item:nth-child(2) {
  content: "Much longer content";
}

<!-- Items grow from different starting points (content size) -->

/* When to use each -->

/* Use flex-basis: 0 for equal columns -->
.equal-columns {
  display: flex;
}

.col {
  flex: 1 1 0;  /* each takes exactly 1/3 -->
}

<!-- Perfect thirds -->

/* Use flex-basis: auto for content-aware sizing -->
.sidebar {
  flex: 0 0 auto;  /* sidebar sized by content -->
  min-width: 250px;
  max-width: 400px;
}

<!-- Sidebar grows/shrinks with content, respecting min/max -->

/* Use specific basis for controlled minimum -->
.card {
  flex: 1 1 250px;  /* min 250px, then grows equally -->
}

<!-- Cards have minimum width, grow equally above that -->

<!-- Asymmetric ratios with flex-basis -->
.container {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* Primary gets 2/3, sidebar gets 1/3 -->
.primary {
  flex: 2 1 0;
}

.sidebar {
  flex: 1 1 0;
}

<!-- [66%] [33%] distribution -->

/* Minimum widths with flexible growth -->
.layout {
  display: flex;
  gap: 20px;
}

.left {
  flex: 1 1 200px;  /* min 200px, flexible growth -->
}

.right {
  flex: 0 0 300px;  /* always 300px, fixed -->
}

<!-- [flexible 200px min] [300px fixed] -->

/* Responsive without media queries -->
.auto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 clamp(200px, 30%, 500px);
}

<!-- Items: min 200px, prefer 30%, max 500px, wrap smartly -->

/* With aspect ratio -->
.card {
  flex: 1 1 250px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

<!-- Cards maintain 3:4 ratio while flexing size -->