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

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

MozBoxPack style property | webkitBoxPack style property

Browser support:

MozBoxPack

webkitBoxPack

Specifies or retrieves where child elements of the box are placed when the box is larger than the size of the children.

Only works for box objects. 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.MozBoxPack;
object.webkitBoxPack;

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

MozBoxPack:	This property is read/write.
webkitBoxPack:	This property is read/write.

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

Possible values:

The type of this property is string.

One of the following values:

center

Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.

end

Child elements are placed on the right or bottom edge of the box.

inherit

Takes the value of this property from the computed style of the parent element.

justify

Child elements are justified.

start

Child elements are placed starting from the left or top edge of the box.

Default: start.

Example HTML code 1:

This example illustrates the use of the -moz-box-pack and the -webkit-box-pack properties:

<head>
    <style>
        .packStart {
            border: 2px solid red;
            width: 250px;
            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-pack: start;
            -webkit-box-pack: start;
        }
        .packEnd {
            border: 2px solid red;
            width: 250px;
            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-pack: end;
            -webkit-box-pack: end;
        }
        .packCenter {
            border: 2px solid red;
            width: 250px;
            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-pack: center;
            -webkit-box-pack: center;
        }
    </style>
</head>
<body>
    <div class="packStart" >
        box-pack: start.
    </div>
    <div class="packEnd" >
        box-pack: end.
    </div>
    <div class="packCenter" >
        box-pack: center.
    </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 MozBoxPack property in JavaScript:

<head>
    <style>
        .example {
            border: 2px solid red;
            width: 250px;
            display: -moz-inline-box;
            -moz-box-pack: start;
        }
    </style>

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

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

            //Changes the value of the property
            var div = document.getElementById ("myDiv");
            div.style.MozBoxPack = boxPack;
            
            // solve refresh problems
            div.className = "";
            div.focus ();
            div.className = "example";
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        test -moz-box-pack property.
    </div>

    <select onchange="ChangeBoxPack (this);" size="5">
        <option selected="selected" />start
        <option />center
        <option />end
        <option />inherit
        <option />justify
    </select>
</body>