CSS <flex> Data Type

Description

The CSS <flex> data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows, and other related properties.

A flexible length is a length that can grow or shrink to fit the available space in a grid container. This is in contrast to a fixed length, which has a specific size and will not change, even if there is more or less space available.

The <flex> data type can be specified using one, two, or three values:

  • One value: The value must be a number, which represents the flex factor. The flex factor determines how much the item will grow or shrink compared to other items in the grid container. A higher flex factor means that the item will grow or shrink more.
  • Two values: The first value represents the flex factor, and the second value represents the flex basis. The flex basis is the initial size of the item before it is grown or shrunk.
  • Three values: The first value represents the flex factor, the second value represents the flex shrink, and the third value represents the flex basis. The flex shrink determines how much the item will shrink compared to other items in the grid container, if there is not enough space for all of the items to fit.

Here are some examples of how to use the <flex> data type:

/* One value */
grid-template-columns: 1flex;

/* Two values */
grid-template-columns: 1flex 100px;

/* Three values */
grid-template-columns: 1flex 1 100px;

In the first example, all of the items in the grid container will have the same width, and they will grow or shrink to fit the available space. In the second example, the first item will have a flex factor of 1, and the second item will have a flex factor of 0. This means that the first item will grow or shrink to fill the available space, but the second item will remain at its fixed width of 100px. In the third example, the first item will have a flex factor of 1, a flex shrink of 1, and a flex basis of 100px. This means that the first item will grow or shrink to fill the available space, but it will not shrink below its minimum width of 100px.

The <flex> data type is a powerful tool for creating flexible and responsive grid layouts. It can be used to create layouts that will look good on all devices, regardless of the screen size.

Syntax

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

Values

  • 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.

Example

/* Create a grid with three columns of equal width. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Create a grid with two columns, where the first column is twice as wide as the second column. */
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

/* Create a grid with three columns, where the first column is flexible and will grow to fill the available space. */
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-columns: flex 2fr 1fr;
}

/* Create a grid with two rows, where the second row is flexible and will grow to fill the available space. */
.grid {
  display: grid;
  grid-template-rows: 1fr flex;
}

Browser Support

The following table will show you the current browser support for the CSS flex data type.

Desktop
Edge Chrome Firefox Opera Safari
1229402810.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
29402810.3257

Last updated by CSSPortal on: 7th October 2023