Create a Responsive 2 Column Layout with CSS Flex-box

In a previous article I’ve talked about creating a responsive 2 column layout, using css floats to position our content area and sidebar. In this article, we’ll create the same exact thing, but instead of using css floats for positioning, we’ll use achieve the 2 column layout with CSS Flex-box. I will not go over what exactly flexbox is and how you can use it for different cases. For that, here’s a great article by Chris Coyier: A Complete Guide to Flexbox.

Also, I won’t go over the basic things like the header, navigation and footer areas. For that, please refer back to the previous article here. Instead we’ll focus on the areas that are different.

Assuming you have the layout ready, which looks like the following:

<div id="container">

	<!-- header -->
	<header id="header">
		<h1 id="title">Responsive Layout</h1>
	</header>

	<!-- Navigation -->
	<nav id="menu" class="clearfix">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
	<!-- Main Content area -->
	<section id="content">
		<!-- your content here -->
	</section>

	<!-- Sidebar -->
	<aside id="sidebar">
		<!-- your content here -->
	</aside>
	<!-- Navigation -->
	<footer id="footer" class="clearfix">
		Copyright &copy Andor Nagy 2015
	</footer>

</div>

In order to use display:flex, we need to wrap our content area and sidebar into another wrapper. We’ll call it #columns. like so:

<section id="columns">
	<!-- Main Content area -->
	<section id="content">
		<!-- your content here -->
	</section>

	<!-- Sidebar -->
	<aside id="sidebar">
		<!-- your content here -->
	</aside>
</section>

After this, we need to change a few things around in our style.css. First of, we need to add the following, under the #container‘s styles

#columns {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
        flex-flow: row	wrap;
}

Then, we need to change the styling on the #content and aside elements.

#content

/* Content Before
--------------------------------------------- */

#content {
	float: left;
	padding: 3%;
	width: 64%;
}

/* Content After
--------------------------------------------- */

#columns > #content {
	padding: 3%;
	width: 64%;
}

Aside

/* Sidebar Before
--------------------------------------------- */

aside {
	float: right;
	padding: 3%;
	width: 24%;
	background-color: #eee;
}

/* Sidebar After
--------------------------------------------- */

#columns > aside {
	padding: 3%;
	width: 24%;
	background-color: #eee;
}

As you can see in the before and after, we changed how we target the elements, and we also removed the floats, this is because the display:flex; flex-flow:row warp; will display the elements inside the #columns element near each other. And since we use Percentage ( % ) to specify width, it will fill out all the space.

And and for the media queries, we need to change the how we target the #content and #sidebar element, and add the style for the #columns container:

@media all and (max-width : 768px) {

	header {
		text-align: center;
	}

	nav {
		text-align: center;
	}

	#columns {
		-webkit-flex-flow: column wrap;
		flex-flow: column wrap;
	}

	#columns > #content {
		width: 94%;
		padding: 3%;
	}

	#columns > #sidebar {
		width: 94%;
		padding: 3%;
		border-top: 3px solid #E64A19;
	}

}

And after this, you pretty much have the same exact layout, with the same width and everything, but instead of using css floats we used css flex-boxes.

I’d personally prefer this method over the other one, but it’s really no big difference. Which one do you prefer? Flex-box or floats? Let me know in the comments below.