2 Columns Layout with Flexbox

CSS Flexbox is great for mobile screens and responsive content for dynamic layouts and webapps. With Flex-box, we can easily achieve the 2 column layout. And no more float and clearfix hacks.

Don't know what Flexbox is? Look here.

I am going to show you a few ways to do it. Feel free to leave comments below if you have a different solution. Here we go:

HTML

<div class="parent">  
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>  

Base CSS:

.parent {
    display: flex;
    align-items: center;
}

Method 1:

    .left {
        margin-right: auto;
    }

Method 2:

    .left {
        flex-grow: 1;
    }

Method 3:

    .right {
        margin-left: auto;
    }

Method 4:

    .parent {
        justify-content: space-between;
    }

2 Equal Width Columns

    .parent > div {
        flex: 1;
    }

Demo