CSS <flex> Data Type

The <flex> CSS data type is a versatile shorthand that allows developers to define the flexibility of a flex item within a flex container. It combines three core components - flex-grow, flex-shrink, and flex-basis - into a single declaration, which makes managing space distribution and layout behavior in a flexible container more efficient. By using <flex>, you can control how elements grow to fill available space, shrink when necessary, and establish a base size before any growing or shrinking occurs.

Unlike individual properties, using <flex> can significantly simplify code, especially when creating complex layouts with multiple items that need to respond to the container's size dynamically. This type is commonly applied to elements inside a div or other containers with display: flex set, allowing for responsive arrangements without relying heavily on floats or absolute positioning.

The first component, flex-grow, determines the proportion of extra space an item should occupy relative to its siblings. The second component, flex-shrink, defines how an item should shrink when the container is smaller than the total size of its children. Finally, flex-basis sets the initial main size of the element before the remaining space is distributed. Combining these into the <flex> type streamlines layout control, ensuring items adjust naturally to container changes.

For example, consider this simple layout:

.container {
  display: flex;
  gap: 10px;
}

.item {
  flex: 2 1 150px; /* grow: 2, shrink: 1, basis: 150px */
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

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

In this example, each .item starts with a base width of 150px. They shrink if necessary and grow at a ratio of 2 relative to other items when extra space is available. By mastering the <flex> type, developers gain precise control over responsive layouts, achieving consistency and flexibility in modern web design.

If needed, <flex> can be paired with other layout-related types, such as <length> or <percentage>, to refine sizing behavior further.

<flex> = auto | <number> | <percentage> | min-content | max-content

• autoThe column or row will be sized to fit its content.
• <number>The column or row will be sized to a specific fraction of the available space.
• <percentage>The column or row will be sized to a specific percentage of the available space.
• min-contentThe column or row will be sized to fit its minimum content size.
• max-contentThe column or row will be sized to fit its maximum content size.

The following information will show you the current browser support for the CSS flex data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile