CSS3 Flex layouts 1

by Mohammed Ismail Ansari

HTML

<div class="container1">
    <div class="one">
        
    </div>
    <div class="two">
        
    </div>
    <div class="three">
        
    </div>
</div>

CSS

.container1
{
    display: -moz-flex; /* Firefox */
    display: -webkit-flex; /* Safari and Chrome */
    display: -ms-flex; /* Internet Explorer 10 */
    display: flex;
    height: 50px;
    border: 1px solid Black;
}

.container1 .one, .container1 .two, .container1 .three
{
    height: 50px;
}

.container1 .one
{
    width: 50px;
    background: red;
}

.container1 .two
{
    -moz-flex: 1.0; /* Firefox */
    -webkit-flex: 1.0; /* Safari and Chrome */
    -ms-flex: 1.0; /* Internet Explorer 10 */
    flex: 1.0;
    background: blue;
}

.container1 .three
{
    -moz-flex: 2.0; /* Firefox */
    -webkit-flex: 2.0; /* Safari and Chrome */
    -ms-flex: 2.0; /* Internet Explorer 10 */
    flex: 2.0;
    background: yellow;
}

JavaScript

// CSS3 Flex layouts