Build a Web Page With CSS3 Flexbox

Yesterday we discussed the future of CSS layout and a few of the new modules that CSS3 brings to the table in this arena. One of these that we briefly touched on was CSS3 Flexbox.
Today we’re going to dig deeper into this model and build a full-on web page with it. It will by no means be ready to implement on your projects but it will give you further insight into one possible way that we will be coding websites in years to come. Plus, this stuff is just flat out fun to play with!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Highly Experimental: Webkit Only

My goal for this post was to have a working page up and running on several browsers, that didn’t happen. At this point the implementation is buggy and inconsistent across browsers, even after installing Flexie.js, I was still getting vastly different results between Firefox and Safari (I think it has to do with mixing typical margin-centered containers and Flexbox).
For this reason, today’s project will primarily be targeted at Safari and Chrome because frankly, it’s still a mess in other browsers! I definitely encourage you to follow along and then play with the finished product to see if you can get it up and running in a cross-browser implementation. If you have suggestions, I’d love to hear them in the comments!

Step 1: Reusable Classes

Since I briefly explained the basic concept of Flexbox in yesterday’s post, I’ll be focusing on implementation here. But don’t worry, you should get the gist as we go along.
The first thing we want to do is create some basic classes that will help define our layout. These attributes can be applied to an ID on an as-needed basis, but I find it helpful to and tidy to do it this way.

.hasflex {
    display: box;
    display: -webkit-box;
    display: -moz-box;
}
 
.box0 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}
 
.box1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}
 
.box2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}
 
.box3 {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
}
 
.last {
 margin-right: 0;
}

Let’s discuss how these classes work. The first class, hasflex, will be applied to a parent container whose children we want to lay out using this new Flexbox system. One thing you’ll notice is that this entire design will be completely without floats so that gives you some good indications as to where we will be implementing Flexbox in our code.
Next, we set up a few more classes to apply various box-flex values. Flexbox will conveniently distribute our child elements across the container and these will define the proportions. I believe that the default value is “0″ but the results seemed a little buggy with this assumption so I found it helpful to always just apply a value manually.

Step 2: Initial HTML & CSS

To start off your HTML document, create a container and a header. At this point, these are basic elements that we will build just like always without the aid of Flexbox.

<div id="container">
    <div id="header">
     <h1>Design Shack Flexbox Demo</h1>
    </div>
</div>

Once you’ve got that in place, throw in the basic styles below. Basically I set up a dark body with a light 1,000px wide container that will hold all of our content. Toss in some margins to center and some basic text styles and we’re ready to move on to the fun stuff.
Note: The headline font I’ll be using is Oswald, from Google Fonts.

/*Basic Reset*/
 
* {
 padding: 0;
 margin: 0;
}
 
/*Body/Container*/
 
body {
 font-family: helvetica, arial, sans-serif;
 font-size: 15px;
 line-height: 23px;
 background: #111;
 color: #222;
}
 

<div id="bigimage">
 <img src="http://lorempixum.com/900/300/food/1" />
</div>

/*Image*/
 
#bigimage {
 margin: 20px auto;
 width: 900px;
}

Step 5: Three Columns: Horizontal

This is where Flexbox really shines. Normally, creating a three column layout like the one shown above would involve a good amount of mathematical planning. We would need to not only split the parent container in three but also figure out the proper proportions so that the middle column is wider than the other two.
However, with Flexbox, all we have to do is apply our flexbox class in conjunction with the numbered box classes. Here I set the middle div to box2 and the others to box3. As you can see in the image above, the effect of this is an automatic distribution of the columns with the second being wider than the first.
Interestingly enough, everything I read led me to believe that the box2 class would be the narrowest in this instance, but that simply wasn’t the case in my live tests! This setup brings about a narrow first and last paragraph and a wide second paragraph.

<div id="columns" class="hasflex">
 
    <div class="box3">
    <h2>One</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="box2"> 
    <h2>Long Two</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="box3"> 
    <h2>Three</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Combine this with some basic CSS and you’ve got a quick and easy three column layout! Since Flexbox automatically takes care of the distribution relative to the parent width, any changes we make to the parent will automatically be reflected in the children.

/*Text Columns: 3 Wide*/
 
#columns {
    width: 900px;
    /*background: gray;*/
    margin: 10px auto;
}
 
#columns p {
 margin: 0 15px 0 0px;
}
 
#columns h2 {
 margin: 0 30px 0 0px;
 line-height: 35px;
 font-family: 'Oswald', arial, serif;
}

One fascinating thing about Flexbox is that we could actually reorder the columns that we setup using pure CSS. Assigning -webkit-box-ordinal-group: (a number); to each element gives you control over the order of their appearance.

Step 6: Vertical Stack

It’s important to learn that you don’t have to use vertical columns when working with Flexbox. We can use the same technique as above to stack a few paragraphs on top of each other. If you really get into Flexbox, this technique can be used to mix vertical and horizontally stacked elements, but we’ll keep it basic here just to see how it works.

<div id="rows" class="hasflex">
    <h2>Long Two</h2>
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
</div>

The primary difference here is that we’ve set box-orient to vertical, which gives us the vertical stack shown in the image above instead of the columns that we created in the previous step.

/*Text Rows*/
 
#rows {
    width: 900px;
    /*background: gray;*/
    margin: 30px auto 15px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
 
#rows p {
 margin: 0 0px 15px 0px;
}
 
#rows h2 {
 line-height: 35px;
 font-family: 'Oswald', arial, serif;
}

Step 7: Two Columns

Just to switch things up one last time, let’s create another section, this time with two columns instead of three. The principle is exactly the same. You don’t have to rethink the layout because you have two columns this time around, Flexbox takes care of all the heavy lifting once again.

<div id="twoColums" class="hasflex">
 <div class="box2">
 <h2>One</h2>
 <p class="">Lorem ipsum dolor sit amet...</p>
 </div>
 
 <div class="box1">
 <h2>Two</h2>
 <p class="">Lorem ipsum dolor sit amet...</p>
 </div>
</div>

/*twoColums*/
#twoColums {
    width: 900px;
    margin: 0px auto;
}
 
#twoColums p {
 margin: 0 20px 0 0;
}
 
#twoColums h2 {
 line-height: 35px;
 font-family: 'Oswald', arial, serif;
}

Finished Product

Check out a live demo if you’re in Safari or Chrome.

Going Further

I intentionally tried to keep this example as simple as possible. However, you can pretty easily take this layout and make it even more complex. For starters, using percentages for width will give you a nice, truly flexible layout. Also, as I mentioned above, you can perform complex actions such as rearranging columns and mixing vertical and horizontal stacks in the same row. I encourage you to play with the code as much as possible using this page as a guide.

Conclusion

This basic example is meant to shed further light into how we could be using Flexbox to create both simple and complex layouts sometime in the future. I’m fairly new to the module so this is far from perfect, as evidenced by the fact that it isn’t cross-browser compatible yet!
Despite its downfalls, you should have a strong grasp of how the module works and what can be done with a relatively small amount of code when leveraging Flexbox. Feel free to toss in plenty of suggestions in the comments!

 
#container {
 width: 1000px;
 margin: 0 auto;
 background: #eee;
 min-height: 1150px;
}
 
/*Header*/
 
#header {
 margin: 0 auto;
 width: 900px;
 padding-top: 20px;
 font-family: 'Oswald', arial, serif;
}

Step 3: Navigation

Now, for the navigation area, you typically create a list of links and then float them to the left. With Flexbox, the process is a little different. Here we simply apply the hasflex class that we created earlier and then use box0 for each of the list items. Applying box0 to all three has the effect of floating the links to the left but won’t distribute them all the way across the width of the container.

<div id="nav">
 <ul class="hasflex">
  <li class="box0"><a href="#">Home</a></li>
  <li class="box0"><a href="#">About</a></li>
  <li class="box0"><a href="#">Contact</a></li>
 </ul>
</div>

After this, we simply apply the same types of styles we would on any other web page. The main goal here is to space the links out a little with some margins and to make sure our links are styled properly.

/*Navigation*/
 
#nav {
    width: 900px;
    /*background: #eee;*/
    margin: 0 auto;
}
 
#nav ul {
 list-style: none;
}
 
#nav ul li {
 margin: 20px 20px 0 0px;
}
 
#nav a {
 text-decoration: none;
 color: #111;
}
 
#nav a:hover {
 text-decoration: underline;
 color: #666;
}

Step 4: The Image

Every good web page needs an image. To further illustrate how you selectively apply Flexbox only to those elements that need it, we’ll throw in a large header image using the same exact code as you typically would.