Understanding the `flex: 1` Property in CSS

What is the `flex: 1` Property?

The flex: 1 property is a shorthand property that sets the flex-grow, flex-shrink, and flex-basis properties to 1. It is used to make a flex item take up equal space in a flex container.

Flex Shrink

The flex-shrink property in CSS determines: how much a flex item will shrink relative to the other flex items within the same flex container when there isn’t enough space available.

flex-shrink: 0: Item will not shrink, even if it overflows the container
flex-shrink: 1: Default; item shrinks at the same rate as others
flex-shrink: 2: Item shrinks twice as much as items with 1

Flex Grow

The flex-grow property in CSS defines how much a flex item will grow relative to the other items inside a flex container when there is extra space available along the main axis (either horizontal or vertical, depending on flex-direction) of the container

flex-grow: 0: Item will not grow
flex-grow: 1: Default; item grows at the same rate as others
flex-grow: 2: Item grows twice as much as items with 1

Flex Basis

The flex-basis property in CSS defines the initial size of a flex item before any available space is distributed. It can be a length (e.g., px, em, rem) or a percentage.

flex-basis: auto; Default; item’s initial size is based on its content
flex-basis: 0; Item’s initial size is 0
flex-basis: 100px; Item’s initial size is 100 pixels

When to Use the `flex: 1` Property?

Equal space: If you want to make a flex item take up equal space in a flex container, you can use the flex: 1 property.

Example

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

Demo

https://codesandbox.io/p/sandbox/css-flex-1-3hmz99

Understanding the flex: 1 Property in CSS

What is the flex: 1 Property?