MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Imagine three school friends sharing a wooden classroom bench.
flex-basis (The Starting Size): Before any bell rings, each student naturally occupies about 200 pixels of bench space.flex-grow (Sharing Extra Room): If the third student is absent today, there is a big empty gap of spare space left on the bench. How do the remaining two students expand? If one student is greedy and takes twice as much extra room (flex-grow: 2), while the other takes normal room (flex-grow: 1), the extra space is divided in a 2:1 ratio.flex-shrink (The Squeeze Factor): Now imagine a fourth student suddenly squeezes onto the already crowded bench! Who yields space? A student with flex-shrink: 0 refuses to budge an inch, forcing the other students to compress and squeeze tighter!+-------------------------------------------------------------------------+ | THE 3 PILLARS OF FLEXBOX SIZING | | | | 1. flex-basis: "Here is my ideal starting size before distributing | | extra space or applying pressure." | | | | 2. flex-grow: "If there is EXTRA empty space in the container, | | how many slices of the leftover pie do I get?" | | | | 3. flex-shrink: "If the container is TOO SMALL, how willing am I | | to sacrifice my size so items don't overflow?" | +-------------------------------------------------------------------------+
Many developers struggle with unpredictable card widths because they rely purely on width instead of mastering the Flex Sizing Equation. In this tutorial, you will understand how the browser calculates these dimensions and how to use the flex shorthand like a senior engineer.
flex-basis: The Initial Size Benchmarkflex-basis defines the initial size of a flex item before any space distribution takes place.
flex-basis vs widthwidth and flex-basis are declared, flex-basis overrides width along the main axis.flex-basis: auto; is used, the browser looks at the item's width property. If no width is set, it sizes based on the inner content.flex-grow: Distributing Positive Free SpaceWhen the total width of all flex items is less than the width of the container, there is leftover empty space (positive free space).
By default, flex-grow: 0;, meaning items refuse to expand, leaving that empty gap visible at the end of the container.
flex-shrink: Handling Negative Space (The Squeeze)What happens when the viewport narrows (such as on a mobile phone) and the items don't have enough room to fit side by side?
By default, all flex items have flex-shrink: 1;. This means every item will gracefully shrink proportionally to prevent the container from breaking or overflowing.
flex-shrink: 0;Have you ever seen an avatar icon or circular profile picture get squished into an ugly flat oval when a card narrows? That happens because flex-shrink: 1 compressed the image!
+-------------------------------------------------------------+ | Without flex-shrink: 0 | With flex-shrink: 0 | | (Image squashed into oval) | (Image remains a true circle) | | | | | ( 0 ) A very long student | ( O ) A very long student | | name and notice text | name and notice text | | squeezes the avatar | wraps cleanly! | +-------------------------------------------------------------+
flex ShorthandWriting flex-grow, flex-shrink, and flex-basis on separate lines is verbose and error-prone. The CSS specification strongly recommends using the flex shorthand:
| Shorthand | Expands To | Meaning & Best Use Case |
|---|---|---|
flex: 1; | 1 1 0% | Item grows and shrinks equally, starting from 0. Perfect for equal-width grid cards! |
flex: auto; | 1 1 auto | Item sizes to its content first, then grows and shrinks equally. |
flex: initial; | 0 1 auto | Default behavior: does not grow, shrinks if needed, sizes to content. |
flex: none; | 0 0 auto | Completely rigid item. Does not grow, never shrinks (like an avatar or fixed sidebar). |
flex: 0 0 280px; | 0 0 280px | Fixed 280px sidebar that never grows or shrinks. |
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
Leaving avatar icons at default flex-shrink: 1 | Always add flex-shrink: 0; to fixed-size icons and badges | Prevents circular icons from turning into warped ovals on small screens. |
Using width: 33.33% inside a flex container | Use flex: 1; | flex: 1 distributes space dynamically without rounding errors or decimal percentages. |
Confusing flex: 1 with flex: auto | flex: 1 uses basis: 0 (strict equal width); flex: auto uses basis: auto (content-biased width) | With flex: auto, a card with 3 paragraphs will be wider than a card with 1 line. |
Setting separate flex-grow, flex-shrink, and flex-basis | Use the combined flex: 1 0 200px; shorthand | Standardized shorthand avoids subtle browser default discrepancy bugs. |
flex-basis: The element's starting dimension before expansion or compression occurs.flex-grow: Proportion of leftover empty space the item will claim (0 = none, 1 = equal share, 2 = double share).flex-shrink: Rate at which an item compresses when space is constricted (0 = never shrink, 1 = shrink proportionally).flex: 1: The most common flex shorthand. Sets flex: 1 1 0%, forcing all siblings to have perfectly equal widths regardless of inner content length.flex-shrink: 0: The golden fix for preserving icon shapes and fixed sidebar column widths.flex: 1; expand to in CSS?flex-grow on a flex item?width: 300px; and flex-basis: 200px; are declared on a flex item in a horizontal row, which value wins?Create a real-world School Digital Library catalog layout:
flex: 0 0 240px) that never shrinks or squishes.flex: 1) displaying library book cards.flex-shrink: 0 so they stay perfectly round!Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.