Previous chapter (CSS3 Layout - Multi columns)Next chapter (CSS3 Layout - Transform)

CSS Flexible Box Extended

The flexible box model has box-pack nad box-align properties. The box-pack property allows to fit the boxes that are in horizontal manner. The box-align property allows to fit the boxes that are in vertical manner. The box-ordinal-group property allows to set the order of the boxes manually.

Other examples in Flexible box (CSS3 Layout)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style>
        .div1
        {
            /*container of the boxes*/
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal;
            width: 100%;
            height: 200px%;
            box-pack: center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
        }
        .div2
        {
            /*container of the boxes*/
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            width: 100%;
            height: 200px%;
            box-align: center;
            -webkit-box-align: center;
            -moz-box-align: center;
        }
        
        .div3
        {
            /*container of the boxes*/
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            width: 100%;
            height: 200px%;
            box-align: center;
            -webkit-box-align: center;
            -moz-box-align: center;
        }
        .box1
        {
            background-color: #000099;
        }
        .box2
        {
            background-color: #CC9;
        }
        .box3
        {
            background-color: #990033;
        }
        
        
        
        .box11
        {
            background-color: #000099;
            box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            -moz-box-ordinal-group: 2;
        }
        .box12
        {
            background-color: #CC9;
            box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
        }
        .box13
        {
            background-color: #990033;
            box-ordinal-group: 1;
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
        }
    </style>
</head>
<body>
    <h3>
        Using box-pack property
    </h3>
    <div class="div1">
        <div class="box1">
            Box1
        </div>
        <div class="box2">
            Box2 contents
        </div>
        <div class="box3">
            Box3
        </div>
    </div>
    <h3>
        Using box-align property
    </h3>
    <div class="div2">
        <div class="box1">
            Box1 contents
        </div>
        <div class="box2">
            Box2 contents
        </div>
        <div class="box3">
            Box3 contents
        </div>
    </div>
    <h3>
        Using box-ordinal-group property
    </h3>
    <div class="div3">
        <div class="box11">
            Box1 contents
        </div>
        <div class="box12">
            Box2 contents
        </div>
        <div class="box13">
            Box3 contents
        </div>
    </div>
</body>
</html>

^1.0

^1.3

^1.0

^5.0

^5.0

CSS Flexible Box Extended

Useful Information