About flex property in CSS


The flex property is a sub-property of the Flexible Box Layout module. This is the shorthand for flex-grow , flex-shrink and flex-basis . The second and third parameters ( flex-shrink and flex-basis ) are optional.

Example :

Here’s the scoop on what the values map to depending on how many values you give it:

flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */
flex: inherit

We all know, the flex property is a shorthand for the flex-grow , flex-shrink , and theflex-basis properties. And its default value is 0 1 auto . It means: flex-grow: 0; flex-shrink: 1flex-basis: auto; but I’ve noticed, in many places flex1 is used.

The flexbasis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)


Credits :
https://css-tricks.com/almanac/properties/f/flex/