Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
community creator

What is the CSS flex property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The flex property in CSSCascade Style Sheets is used to set the flexible length on the flexible items.

It is a shorthand property of the following:

  • flex-basis
  • flex-grow
  • flex-shrink

There is no effect of this property on non-flexible items.

Syntax


flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Property values

  • none: It is the same as the 0 0 auto. It doesn’t have any effect on the item.

  • auto: It is the same as the 1 1 auto.

  • flex-grow: It is used to specify that how much the item will grow when it is compared with the other flexible items.

  • flex-shrink: It is used to specify that how much the item will shrink when it is compared with the other flexible items.

  • flex-basis: If we want to set the length of the flexible items then it is used. Negative values are not allowed.

  • initial: sets the value to its default value.

  • inherit: inherits the property from its parent value.

Implementation

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the flex property is as follows:

Flex property

In this example, we can see that we can set the flex property of the smaller box as 1 0 auto and the larger box as 3 0 auto.

Therefore, we can see that the sizes of both boxes are different depending upon the different values provided in the flex property.

RELATED TAGS

css
html
community creator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring