O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

box-flex

Values:

<number>

Initial value:

0

Applies to:

Normal-flow children of an element with a display value of box or inline-box

Inherited:

No

Computed value:

As declared

Description:

Defines the “flexibility” of an element that is the child of a box. The box-flex values for all the flexible boxes in a group are added together, and then each is divided by that total to get the flexibility. Thus, for example, if three flexible boxes in a group all have a value of 1, then each has a flexibility of 0.33. If one of them has its box-flex value changed to 2, then it would have a flexibility of 0.5 and the other two would each have a flexibility of 0.25. The default value of 0 indicates that the box is inflexible.

After the flexible boxes are laid out as normal, any extra space left over within the parent box is distributed to the flexible boxes according to its flexibility. To continue the previous example, if there are 100 pixels of space left over, then the flex-box: 2 element gets 50 pixels added to it, and the other two each get 25 pixels. Similarly, if the flexible boxes overflow the parent box, they are reduced in size proportionately.

Examples:

#nav li {box-flex: 1;}

Note:

This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required