22/07/2026
CSS Flexbox in 30 Seconds! 🤯 flex: 0 0 33% Explained Simply
Ever seen this line in CSS?
flex: 0 0 33%;
At first glance it looks confusing... but it's actually very simple! 👇
✅ First 0 → flex-grow
Your item will NOT grow, even if extra space is available.
✅ Second 0 → flex-shrink
Your item will NOT shrink, even if the container becomes smaller.
✅ 33% → flex-basis
Each item starts with 33% width of the container.
💡 Easy Formula to Remember
❌ Don't Grow
❌ Don't Shrink
✅ Take 33% Width
That's why 3 items fit perfectly in one row, each taking about one-third of the available width. item{
flex: 0 0 33%;
}
Whenever you see
flex : grow shrink basis;
Just read it like this:
Grow | Shrink | Width
Once you understand these three values, Flexbox becomes much easier to use. 🚀
💬 Question for You:
Which CSS topic should I explain next?
1️⃣ justify-content
2️⃣ align-items
3️⃣ flex-wrap
Comment your answer below! 👇
❤️ Follow K2infocom for simple Programming, Python, DataScience Web Development, CSS, JavaScript, React, and .NET tutorials explained in an easy way.
