This property is the cornerstone of the CSS Flexible Box Layout Module, fondly referred to as Flexbox, which is just a fancy term for a layout model that enables easy manipulation of the size and position of elements within a container.

Syntax Explanation

1

.element {

2

  flex: <flex-grow> <flex-shrink> <flex-basis>;

3

}

The flex shorthand property is a combination of flex-grow, flex-shrink, and flex-basis. Each one of these values has a special role in shaping the behavior of your elements. Think of them as three musicians in a band, each playing a unique part but all harmonizing to create the beautiful melody that is your responsive layout.

This property is applicable to all flex items, which are the children of a flex container. The initial or default value is 0 1 auto, a polite way for your elements to say, “Hey, I’ll only take up as much space as I need, but I’m flexible to shrink if necessary.”

This property is not inherited, as it’s specifically intended for direct children of a flex container. CSS animations can be applied to it, which means you can make your layout dance to your tune quite literally.

Constituent Properties

The flex property is a shorthand for the following CSS properties:

flex-grow

1

.element {

2

  flex-grow: 1;

3

}

Think of flex-grow as the generosity factor. It specifies how much of the remaining space in the flex container should be assigned to the item. A flex-grow value of 1 says, “Hey, I’m feeling generous today. Let me take up any space that’s left over.”

flex-shrink

1

.element {

2

  flex-shrink: 2;

3

}

Flex-shrink, on the other hand, is the humility factor. It determines how much the flex item will shrink relative to the rest of the items in the flex container when there isn’t enough space. A flex-shrink value of 2 says, “I can be twice as humble as my siblings when the need arises.”

flex-basis

1

.element {

2

  flex-basis: 20%;

3

}

Flex-basis is the confidence factor. It defines the default size of an element before the remaining space is distributed. A flex-basis value of 20% asserts, “I deserve 20% of the space here, thank you very much.”

Learn More

Did you know that while flex-grow and flex-shrink have numeric values, they don’t represent actual pixel units but rather ratios? These are relative to the other elements around them, making it a symbiotic relationship of sorts, with each element considering the others while deciding its own space. Now isn’t that a lovely thought?

Rachel Andrew, a renowned CSS developer, once said:

“The Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown or dynamic.”

You can find more of her insights here.

Relevant Tutorials

Official Specification and Browser Support

• The official specification for this property on the W3C website.
• The compatibility table for the flex property on Can I Use.