CSS

CSS

🎯 CSS flex Property

The flex CSS property is a shorthand property used in Flexbox layouts to define how a flex item grows, shrinks, and determines its initial size.

Instead of writing flex-grow, flex-shrink, and flex-basis separately, you can combine them into a single declaration.

πŸ”Ή Why Use flex?

  • Benefits

  • πŸ“Œ Combines multiple Flexbox properties into one line
  • πŸ“Œ Creates cleaner and more maintainable code
  • πŸ“Œ Controls growth, shrinking, and base size simultaneously
  • πŸ“Œ Essential for building flexible and responsive layouts

πŸ”Ή flex Syntax

CSS

flex:   ;

This shorthand combines the three most important sizing properties used by Flexbox items.

πŸ”Ή flex Property Values

  • flex-grow β†’ Defines how much an item can grow when extra space is available.
  • flex-shrink β†’ Defines how much an item can shrink when space becomes limited.
  • flex-basis β†’ Sets the initial size of the flex item.
  • auto β†’ Uses the item's automatic size, usually based on its content.
  • initial β†’ Resets the property to its default value, typically 0 1 auto.

🧩 Practical Example

CSS

.container {
    display: flex;
}

.item {
    flex: 2 1 150px;
}

In this example:

  • flex-grow: 2 β†’ The item grows twice as much as items with a value of 1.
  • flex-shrink: 1 β†’ The item shrinks at the normal rate when space is limited.
  • flex-basis: 150px β†’ The item starts with a width of 150px.

  • 🧠 Quick Summary

  • flex is the shorthand version of flex-grow, flex-shrink, and flex-basis.
  • It allows you to control item sizing behavior with a single declaration.
  • It is one of the most frequently used properties in modern Flexbox layouts.
  • Using the shorthand syntax helps keep Flexbox code clean and easy to maintain.
CSS flex-grow
CSS flex