HTML and CSS Reference
In-Depth Information
Initial value:
Applies to:
Normal-flow children of an element with a display value of box or inline-box
Computed value:
As declared
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.
#nav li {box-flex: 1;}
Search WWH ::

Custom Search