EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

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 flex-grow, flex-shrink, and 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.

Flexible Box Layout ModuleIE11

 

Syntax

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Property values

<'flex-grow'>

Sets the flex grow factor or positive flexibility for the flex item. The flex grow factor determines how much a flex item will grow relative to the other items in the flex container.

If omitted, the element's positive flexibility is "1". A negative value is not valid.

<'flex-shrink'>

Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.

If omitted, the element's negative flexibility is "0". A negative value is not valid.

<'flex-basis'>

Sets the initial size of the flex item, and takes the same values as the CSS width property. If omitted, defaults to "0px". Negative numbers are invalid.

none

Equivalent to setting flex to "0 0 auto".

CSS information

Applies Toflex items
Mediavisual
Inheritedno
Initial Value0 1 auto

Standards information

Remarks

The 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 flex property is used rather than the width property to define the main size of the element. If an element is not a flex item, the 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 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 flex-grow and the flex-shrink values. If the flex-grow/flex-shrink values are different, the computed value for "-webkit-box-flex" is returned as "". When 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, 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.

A flex container before it is resized

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

A flex container after it is resized


#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 flex property. This is equivalent to 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.

See also

CSSStyleDeclaration
flex-basis
flex-grow
flex-shrink

 

 

Afficher:
© 2014 Microsoft