Tech.Coursera

building for education. one byte at a time.

Flexbox @ Work

(Comments)

tl;dr

  1. Flexbox Examples from Coursera: http://codepen.io/anon/pen/XbeNyo
  2. I compiled a list of flexbox CSS rule sets vendor-prefixed and with examples to help you get started http://codepen.io/anon/pen/XbeNyo

As front end developers, we encounter problems everyday with laying things out: horizontal alignment, vertical centering, floating items to the left or right, and many more. Flexbox can be our go to solution for a lot of these layout problems. In this post, let’s learn the basics of flexbox and build one piece of Coursera discussions using flexbox.

Problem Example

Let’s take an example from Coursera’s course discussions: Coursera Discussions example

For each list item, we need to arrange the title, user metadata and number of replies. Coursera Discussions one item

This consists of two sections: title with user metadata and number of replies. Pre-flexbox, our solution for laying out horizontally would be table row, float: right, and solution for vertical centering would be vertical-align, if it does not work, then top: 50%, left 50% and transform: translate(-50%, -50%).

This approach takes a good chunk of work and trial and error to come up with the perfect combination. This is where Flexbox comes in handy.

What is Flexbox?

Flexbox is a flexible layout box that splits any available width/height proportionally between the elements within it. The width or height can be specified in absolute or relative units. The width/height will be split among the elements based on the ratio of split we specify.

Flexbox Basics

By default each element occupies the minimum amount of space it requires as shown below.

default:default:default default:default:default dim

We can specify other ratios of width or height for the elements. Some examples:

1:default:default 1:default:default dim

1:2:3 1:2:3 dim

For a ratio of 1:2:3, the available width is split into six portions and the first element gets one portion of the width, and the second gets two portions of the width and the third gets three portions. As the total width changes with the size of the device, the space continues to be allocated according to these proportions.. By specifying the direction (either row or column), flexbox can be used to align items in a horizontal or vertical layout.

default:1:default (vertical layout) default:1:default dim

Let’s build using Flexbox

Coming back to the example, we want a horizontal flexbox (row oriented flexbox). We can split the thread list item into two areas, the first section with thread information and user information and second section with number of replies.

Full example - first step

<section class=“horizontal-box">
 <div class=“flex-1">
    <div> The Billiard Balls </div>
    <div>
      <span>Adanna Eziri</span>
                    &middot;
      <span>18 minutes ago</span>
    </div>
 </div>
 <div class=“numReplies"> 0 replies </div>
</section>

// For sake of brevity, I am leaving out the vendor prefixes here.
.horizontal-box {
  display: flex;
 }
.flex-1 {
  flex: 1;
}

This is what we get: Full example - first iteration result

What’s going on here?

First, specify that the section is a flexbox. Next, we specified a ratio of 1:default. This means that the available width for section will be split such that number of replies (which has a proportion of default) will get just enough width required including any padding and margin and the rest of the space will be allocated to first div (1 => 100% of the rest of space).

For example,. if available width is 400px, if the number of replies occupies a width of 36px, the remaining space (400px - 36px = 364px) will be allocated to the first div.

Let’s look at one more example to clear this up. Here, our available width is 450px, and the elements within it have a flex ratio of 2:1:default. Assuming the last section (which is given a default ratio) occupies 40px. The width split will be as below:

Example width split

Coming back to our main example, this approach gives us most of the layout that we want. But we still have one problem: the number of replies is too far up.

Coursera Discussions example

To solve this we have to vertically center the contents in this div. Flexbox makes this easy:

<section class=“horizontal-box align-items-vertical-center">
 <div class=“flex-1">
    <div> The Billiard Balls </div>
    <div>
      <span>Adanna Eziri</span>
                    &middot;
      <span>18 minutes ago</span>
    </div>
 </div>
 <div class=“numReplies"> 0 replies </div>
</section>

// For sake of brevity, I am leaving out the vendor prefixes here.
.align-items-vertical-center {
  align: center;
}

That is it.

Example finish

Coursera Flexbox Examples

You can view this full example and more covering vertical box here: http://codepen.io/anon/pen/XbeNyo

The browser support for flexbox is IE10+ and all evergreen browsers. You can check out the complete list of supported browsers and limitations here: http://caniuse.com/#feat=flexbox

This is a simplified example. There are many additional spacing and alignment options offered by flexbox. Also, vendor prefixes are necessary to use flexbox and I’ve left those out for brevity. Fortunately most CSS preprocessors will handle the prefixes for you. To help get you started, I compiled a CSS rule set that including all the necessary prefixes and examples: http://codepen.io/anon/pen/MwobeP.

Thanks to Brennan Saeta, Jacob Lyles and Roger Goldfinger for their reviews and suggestions on this post.

Get in touch https://twitter.com/archana_june