CSS

CSS

🎯 CSS flex-basis Property

The flex-basis CSS property defines the initial size of a flex item before any growing or shrinking occurs.

It determines how much space an element takes inside a Flexbox container at the start of layout distribution.

πŸ”Ή Why Use flex-basis?

  • Benefits

  • πŸ“Œ Defines initial item size in Flexbox
  • πŸ“Œ Works with flex-grow and flex-shrink
  • πŸ“Œ Helps create predictable layouts
  • πŸ“Œ Useful for responsive design control

πŸ”Ή flex-basis Values

  • auto β†’ Default size based on content
  • length β†’ Fixed size (px, %, rem, etc.)
  • initial β†’ Resets to default (auto)

🧩 Basic Example

CSS

.container {
    display: flex;
}

.item {
    flex-basis: 150px;
}

In this example, each flex item starts with a base width of 150px before growing or shrinking.

  • 🧠 Quick Summary

  • flex-basis β†’ defines the initial size of a flex item
  • auto β†’ uses content-based size
  • length β†’ sets fixed size (px, %, rem, etc.)
  • initial β†’ resets to default value
CSS flex-flow
CSS flex-grow