In order to access this site you need to enable JavaScript!

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

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

Browser support:

-moz-box-flex:

-webkit-box-flex:

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.

inherit

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:

<head>
    <style>
        .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;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="flex1">flex 1</div>
        <div class="flex2">flex 2</div>
        <div class="flex3">flex 3</div>
    </div>
</body>