CssConceptBeginner · 3 min read

What is flex 1 in CSS: Simple Explanation and Usage

flex: 1 in CSS is a shorthand that makes a flex item grow to fill available space equally with other flex items. It sets flex-grow to 1, allowing the item to expand, while flex-shrink and flex-basis are set to 1 and 0 respectively by default.

⚙️

How It Works

Imagine you have a box divided into parts, and you want each part to grow and fill the space evenly. Using flex: 1 on a flex item tells it to take up an equal share of the leftover space inside a flex container. This means if you have three boxes with flex: 1, they will each stretch equally to fill the container.

Technically, flex: 1 is a shortcut for flex-grow: 1, flex-shrink: 1, and flex-basis: 0. This means the item can grow, shrink if needed, and starts with no base size, so it fully relies on the available space distribution.

💻

Example

This example shows three colored boxes inside a container. Each box uses flex: 1 to share the container's width equally.

css

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  height: 100px;
  border: 2px solid #333;
}
.box {
  flex: 1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.box1 { background-color: #e63946; }
.box2 { background-color: #457b9d; }
.box3 { background-color: #2a9d8f; }

Output

🎯

When to Use

Use flex: 1 when you want multiple items inside a flex container to share space evenly, regardless of their content size. This is common in navigation bars, card layouts, or any row or column where equal spacing is needed.

It helps create responsive designs that adjust smoothly when the browser window changes size, making your layout flexible and user-friendly.

✅

Key Points

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: 0.
It makes flex items grow equally to fill available space.
Items with flex: 1 shrink if needed to fit smaller containers.
Great for creating flexible, responsive layouts without fixed widths.

✅

Key Takeaways

flex: 1 makes flex items grow equally to fill space inside a flex container.

It is shorthand for setting grow, shrink, and basis properties together.

Use it to create flexible, responsive layouts that adapt to screen size.

Items with flex: 1 share space evenly regardless of their content.

It helps avoid fixed widths and makes designs more fluid and user-friendly.