HTML and CSS Reference
In-Depth Information
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 ex-
ample, 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;}
