You are here: Reference > CSS > properties > browser specific extensions > -moz-box-flex

-moz-box-flex property | -webkit-box-flex property

Browser support:
Specifies how an element grows to fill the box that contains it, relative to its siblings.
Only works for elements in a box object. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).
JavaScript page for this property: MozBoxFlex | webkitBoxFlex. You can find other example(s) there.

Possible values:

 One of the following values: 
flexibility (non-negative integer)
Integer, the priority of flexibility according to other elements.
Takes the value of this property from the computed style of the parent element.
Default: 0.

Example HTML code 1:

This example illustrates the use of the -moz-box-flex and the -webkit-box-flex properties:
        .box {
            display: -moz-inline-box;
            display: -webkit-inline-box;
            width: 250px;
            border: 5px solid red;
        .flex1 {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            background: green;
        .flex2 {
            -moz-box-flex: 2;
            -webkit-box-flex: 2;
            background: cyan;
        .flex3 {
            -moz-box-flex: 3;
            -webkit-box-flex: 3;
            background: orange;
    <div class="box">
        <div class="flex1">flex 1</div>
        <div class="flex2">flex 2</div>
        <div class="flex3">flex 3</div>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content