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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBoxFlex

MozBoxFlex style property | webkitBoxFlex style property

Browser support:

MozBoxFlex

webkitBoxFlex

Specifies or retrieves 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).

Syntax:

object.MozBoxFlex;
object.webkitBoxFlex;

You can find the related objects in the Supported by objects section below.

MozBoxFlex:	This property is read/write.
webkitBoxFlex:	This property is read/write.

CSS page for this property: -moz-box-flex

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBoxFlex and webkitBoxFlex properties in JavaScript:

<head>
    <style>
        .parent {
            display: -moz-inline-box;
            width: 250px;
            border: 5px solid red;
        }
        .bold {
            font-weight:bold;
            -moz-box-flex: 1;
            background: green;
        }
        .italic {
            font-style:italic;
            -moz-box-flex: 2;
            background: cyan;
        }
        .underline {
            
            text-decoration:underline;
            -moz-box-flex: 3;
            background: blue;
        }
    </style>

    <script type="text/javascript">
        function ChangeBoxFlex (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected option's text
            var boxFlex = selectTag.options[whichSelected].text;

            var bold = document.getElementById ("myBold");

            if ('MozBoxFlex' in bold.style) {
                bold.style.MozBoxFlex = boxFlex;
            } else if ('webkitBoxFlex' in bold.style) {
                bold.style.webkitBoxFlex = boxFlex;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    Use the SELECT field to change the value of the 
    moz-box-flex property of the bold element!
    <select onchange="ChangeBoxFlex (this);" size="7">
        <option selected="selected" />1
        <option />2
        <option />3
        <option />4
        <option />5
        <option />6
        <option />12
    </select>

    <div class="parent">
        <div class="bold" id="myBold">bold</div>
        <div class="italic">italic</div>
        <div class="underline">underline</div>
    </div>
</body>