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

CSS Flexible Box Basic

The flexible box layout gives us a way of creating flexible boxes. It lets us align and distribute boxes vertically and horizontally as well as have boxes flex to use all available space. You can also display the elements in reverse order compared to how they are ordered in the markup.

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;
            height: 120px;
            width: 400px;
            color: white;
        }
        .div2
        {
            /*container of the boxes*/
            display: -webkit-box;
            display: -moz-box;
            display: box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            box-direction: reverse;
            -webkit-box-direction: reverse;
            -moz-box-direction: reverse;
            color: white;
        }
        /*boxes*/
        .box11
        {
            height: 100px;
            width: 100px;
            background-color: #000099;
            box-flex: 2;
            -webkit-box-flex: 2;
            -moz-box-flex: 2;
        }
        .box12
        {
            height: 100px;
            width: 100px;
            background-color: #000099;
        }
        .box13
        {
            height: 100px;
            width: 100px;
            background-color: #000099;
        }
        
        .box1
        {
            height: 100px;
            width: 100px;
            background-color: #000099;
        }
        .box2
        {
            height: 100px;
            width: 100px;
            background-color: #CC9;
        }
        .box3
        {
            height: 100px;
            width: 100px;
            background-color: #990033;
        }
    </style>
</head>
<body>
    <h3>
        Box model example
    </h3>
    <div class="div1">
        <div class="box1">
            Box1
        </div>
        <div class="box2">
            Box2
        </div>
        <div class="box3">
            Box3
        </div>
    </div>
    <h3>
        Boxes with reverse property
    </h3>
    <div class="div2">
        <div class="box1">
            Box1
        </div>
        <div class="box2">
            Box2
        </div>
        <div class="box3">
            Box3
        </div>
    </div>
    <h3>
        Box model with flex property.
    </h3>
    <div class="div1">
        <div class="box11">
            Box1
        </div>
        <div class="box12">
            Box2
        </div>
        <div class="box13">
            Box3
        </div>
    </div>
</body>
</html>

^1.0

^1.3

^1.0

^5.0

^5.0

CSS Flexible Box Basic

Useful Information