Flex of flexible Flexible box model

Instance

Let all the child elements of the elastic box model object have the same length, ignoring the contents of their interior:

1. # Main Div
2. {
3. Flex : 1 ;
4. }

CopyEffect Preview Browser support

The number in the table represents the version number of the first browser that supports the property.

The number immediately following the-webkit-,-ms-or-moz-is the first version that supports the prefix attribute.

Definition and usage

Flex properties are used to set or retrieve how the child elements of a flexible box model object allocate space.

Flex properties are shorthand properties for the Flex-grow, Flex-shrink, and Flex-basis properties.

Note: If the element is not a child of the elastic box model object, the Flex property does not work.

	0 1 auto
inherit:	no
can be animated:	Yes, see individual properties . See  CSS3 Animation properties, CSS3 animated instances
version:	CSS3
JavaScript Syntax:	object. style.flex= "1" effect preview

CSS Syntax Flex: Flex-grow Flex-shrink flex-basis|auto|initial|inherit; property value

value	Description
flex-grow	A number that specifies how much the project will scale relative to other flexible projects.
flex-shrink	A number that specifies how much the project will shrink relative to other flexible projects.
flex-basis	length of the project. Legal value: "Auto", "inherit" or a number followed by "%", "px", "em", or any other length unit.
auto	same as 1 1 auto.
none	same as 0 0 auto.
initial	Set this property to its default value, which is 0 1 auto. See   initial .
Inherit	Inherit the property from the parent element. See inherit.

Flex of flexible Flexible box model