📏 CSS Tutorial: flex-basis

📌 Introduction

The flex-basis property defines the **initial size of a flex item** before extra space is distributed by flex-grow or removed by flex-shrink. It is one of the three core Flexbox item properties:flex-grow → expandflex-shrink → shrinkflex-basis → base size
Mastering flex-basis gives you precise control over flexible layouts. 🎯✨

🎯 What Does flex-basis Control?

  • Sets the default width (row direction) or height (column direction)
  • Overrides width unless it's set to auto
  • Controls how items grow/shrink around a base size
  • Works in combination with flex-grow and flex-shrink

✨ Syntax

Syntax

flex-basis: auto | <length> | <percentage>;

🧩 Accepted Values

1. auto (default)

The size is based on the element's content, or width/height if specified.

Code Snippet

flex-basis: auto;

2. Length (px, rem, etc.)

Sets a fixed starting size.

Code Snippet

flex-basis: 200px;

3. Percentage

Calculates size relative to the container.

Code Snippet

flex-basis: 33.33%; /* one-third */

4. 0

Means the item starts at zero size and grows only using flex-grow.

Code Snippet

flex-basis: 0;

Note

flex-basis overrides width, except when flex-basis is set toauto.

🔥 Practical Examples

1. Three Equal Columns

Code Snippet

.container {
  display: flex;
}

.item {
  flex-basis: 33.33%;
}

2. Sidebar + Content Layout

Code Snippet

.container {
  display: flex;
}

.sidebar {
  flex-basis: 250px; /* fixed */
}

.content {
  flex-grow: 1; /* fills remaining space */
}

3. Grow From Zero Using flex-basis: 0

Code Snippet

.item {
  flex-grow: 1;
  flex-basis: 0; /* distribute space equally */
}

4. Using flex-basis with flex-flow: column

Code Snippet

.column {
  display: flex;
  flex-direction: column;
}

.item {
  flex-basis: 100px; /* now controls height */
}

📊 flex-basis vs width

PropertyBehavior
widthIgnored in flexbox if flex-basis is not auto
flex-basisPreferred size used in flex layout calculations

🧠 Common Patterns

📌 Equal Width Items

Code Snippet

.item {
  flex: 1 1 0; /* flex-grow, flex-shrink, flex-basis */
}

📌 Fixed + Flexible Layout

Code Snippet

.left {
  flex: 0 0 300px; /* cannot grow or shrink */
}

.right {
  flex: 1; /* grows */
}

🧠 Tips

  • Use flex-basis: 0 for equal flexible items
  • Use px when you need fixed sizes, % for responsive proportions
  • Remember: flex-direction decides whether flex-basis controls width or height
  • Combine flex: grow shrink basis for the cleanest code
>>“Flex-basis is the foundation of every responsive flex layout — master it and layouts become effortless.” ✨

🎉 Conclusion

The flex-basis property is the core of Flexbox sizing. It defines the initial size of items and works hand-in-hand withflex-grow and flex-shrink. Understanding how flex-basis behaves with width, percentages, and flex-direction unlocks powerful, responsive layouts. 🚀