flex property

A shorthand property that specifies the parameter values of a flexible length, the positive and negative flexibility, and the preferred size specified by the IHTMLCSSStyleDeclaration3::flex-grow, IHTMLCSSStyleDeclaration3::flex-shrink, and IHTMLCSSStyleDeclaration3::flex-basis properties.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name flex, which is preferred for better standards compliance and future compatibility.

Syntax

object.put_flex( v);object.get_flex(number* p);

Property values

Type: DOMString

A floating point value that indicates the relative flexibility of a flex item.

A value of "0.0" indicates the element is not flexible. Any other value indicates the relative flexibility of the child element compared to the flexibility of other flex item.

A negative value is not valid.

String format

none |[ IHTMLCSSStyleDeclaration3::flex-grow IHTMLCSSStyleDeclaration3::flex-shrink?|| IHTMLCSSStyleDeclaration3::flex-basis ]

CSS information

Standards information

• Flexible Box Layout Module

Remarks

The IHTMLCSSStyleDeclaration3::flex property is a shorthand property. Separate properties can be used to specify each component, but in many cases it is more convenient to set them in one place using this shorthand property. This property specifies components of a flexible length, using the flex grow factor, flex shrink factor, and flex basis to determine size.

When an element is contained in a flex item, the IHTMLCSSStyleDeclaration3::flex property is used rather than the IHTMLCurrentStyle::width property to define the main size of the element. If an element is not a flex item, the IHTMLCSSStyleDeclaration3::flex property has no effect.

A unitless zero that does not have two flex factors before it will be interpreted as a flex factor. You need to specify a zero IHTMLCSSStyleDeclaration3::flex-basis component with a unit or precede it by two flex factors to avoid misinterpretation or invalid declarations.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports the deprecated "-webkit-box-flex" property for interoperability purposes. However, "-webkit-box-flex" sets both the IHTMLCSSStyleDeclaration3::flex-grow and the IHTMLCSSStyleDeclaration3::flex-shrink values. If the IHTMLCSSStyleDeclaration3::flex-grow/IHTMLCSSStyleDeclaration3::flex-shrink values are different, the computed value for "-webkit-box-flex" is returned as "". When IHTMLRuleStyle::display: "-webkit-box"/"-webkit-inline-box" is specified, the default negative flex is 0.

Examples

In this example, there are three flex items inside of the flex container.

<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

In the example, IHTMLCSSStyleDeclaration3::flex is defined for each flex item. The image below shows the flex container before it has been resized to be smaller than its original size.

The following image shows the flex container after it has been resized to be smaller than its original size.

#flexContainer {
   border: 1px solid #949494;
   display: flex;       
} 
#item1 {
   background:#66CC33;
   flex: 1 1 15%;
}
#item2 {
   background:#0099FF;
   flex: 2 1 60%;
}
#item3 {
   width: 100px;
   background:#66CC33;
   flex: auto;
}

The first two values in the flex syntax determine how much a flex item will grow/shrink relative to the other items in the flex container. The third value sets the initial size of the flex item. In this example the second flex item has a larger flex grow factor and a larger initial size. The third flex item has auto defined for the IHTMLCSSStyleDeclaration3::flex property. This is equivalent to IHTMLCSSStyleDeclaration3::flex: 1 1 auto. This sizes the flex item based on the 100 pixel width that is defined for the flex item, but makes the flex item fully flexible so it absorbs the free space along the main axis.

Requirements

See also

IHTMLCSSStyleDeclaration3::flex-basis

IHTMLCSSStyleDeclaration3::flex-grow

IHTMLCSSStyleDeclaration3::flex-shrink