Make elements take up space left in the container element

Posted By : Arun Kumar | 28-Dec-2014

html5

Assigning space amongst child elements was really difficult before flex-box layout.Now its as easy as pie.

Lets start by creating our html markup

<div class="parent">

    <div class="child">

        abc

    </div>

    <div class="child">

        abcdefghijklmno

    </div>

    <div class="child">

        abcdefghijklmnopqrstu

    </div>

</div>

and the css :

.parent{

    width:400px;

    height:100px;

    background-color:yellow;

    display:flex;

    flex-direction:row;

    padding:10px;

    justify-content:space-around;

}

.child {

    background-color:red;

    border:1px solid blue;

}

The output:

the output

This is being done by the flex-box layout.

First we set display:flex to the parent container and justify-content:space-around.The property flex-direction:row is not really required here because the "row" is the default value for flex-direction property.

Lets try changing justify-content to space-between.

flex-box 2