CSS flex Property
Flex CSS shorthand is a combination of the flex-grow, flex-shrink, and flex-basis properties. It's used to specify the length of movable items. Flex is much more responsive and mobile-friendly. It is simple to place child elements and the main container. The margin does not collapse with the margins of the content. Any element's order can be easily changed without having to edit the HTML section.
Syntax
Property Values
| Value | Description |
|---|---|
| flex-grow | A number indicating how much the item will grow in comparison to the other flexible items. |
| flex-shrink | A number indicating how much the item will shrink in comparison to the other flexible items. |
| flex-basis | The item's overall length. Legal values include "auto," "inherit," or a number followed by "percent," "px," "em," or any other length unit. |
| auto | 1 1 auto is the same as 1 1 auto. |
| initial | 0 1 auto is the same as 0 1 auto. |
| none | 0 0 auto is the same as 0 0 auto. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| flex |
29.0
21.0 -webkit- |
28.0
18.0 -moz- |
9.0
6.1 -webkit- |
11.0
10.0 -ms- |
17.0 |