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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content