Building Flexbox website

This is the material I originally created for workshop “Web Layout with Flexbox” at World Internet Developer Summit 2015 in Hong Kong.

1. Preparation
2. Introducing Flexbox
3. Row–Column grid layout
5. Summary

I’m Thomas Mak. You’ll also find me on internet as Makzan. I teach know-how via books, screencasts and classes.

I’m now in Macao to help transferring technology knowledge to Macao’s small-medium enterprise. That’s why I’m currently working at CPTTM—Macau Productivity and Technology Transfer Center.

Have a chat

You may contact me for any kind of questions and sharing. I focus on mobile web and iOS app development. I also built multiplayer interaction with socket server and node.js. I like to learn more.

Just ping me at any time for a chat.

Preparing for the workshop

You’ll need to bring your laptop with a modern browser and your favorite code editor installed. There are code demos in this book. I put both the code into the page and on Codepen is live demo. You can find those live demos in the following Codpen collection. Please fork them and play around the code yourself. You won’t learn it until you hack it.

http://codepen.io/collection/XdbWMW/

-prefix-free library

-prefix-free is the JS library made by Lea Verou. It parses the CSS properties and apply certain vendor prefixes on the rules by determining the browser version. This library allows us to skip worrying about different prefixes and the old syntaxes.

Preprocessor

The logic in CSS preprocessor provides us the DRY—Don’t repeat yourself—way to write the CSS code. We will use some Scss code when defining the grid layout. It’s loop and list feature helps reducing the lines of code a lot. If you are using other preprocessor, you may find their equivalents in CSSPre.com. If you aren’t using any preprocessor, no worry, we also provide the full CSS code.

Chapter 1—Introducing Flexbox

In this chapter, we explore basic Flexbox usages.

1. Flex direction
2. Center alignment
3. Container and items
4. Flex grow and shrink
5. Inputs

Setting main axis with flex-direction

In Flexbox, we control how items are placed within the container. A container is a box with X and Y axis. The Flexbox’s property name doesn’t use X, Y, Left, Top wordings. It’s because we can set flex-direction to control the Main Axis. The other axis is called Cross Axis.

Align items and justify content

We can now better understand the align and justify after we learn the direction concept. align-items aligns items on the cross axis and justify-content aligns items on the main axis.

Think about justifying a text in word processor. Normally we write the text for left to right. Let’s assume this is as same as having a row direction for our text content. When we click the left, center, right or justify alignment buttons on the toolbar, we can move the content in the row direction. This is what justify-content means—How the content itself aligns in the main axis.

Once we know justify-content is for the main axis, we know align-items is for the other one.

Center align

Center alignment is one of the most discussed topic in CSS. Flexbox provides a easy and elegant way to solve this layout issue.

Example—Center aligning one item

HTML:

CSS:

The beautify of margin: auto on the child items is that it automatically spread the items across the space with equivalent margins.

Example—Distribute multiple items in container

Thanks to the margin: auto, the browser automatically distribute all the items inside the flexbox container equally.

Using align-items and justify-content

Alternatively, we can configure the alignment in the container by using the align-items and justify-content properties.

Example—Center aligning multiple items

By using the container’s alignment options, we can center align multiple items together.

You can find the live demo in the following link:

http://codepen.io/makzan/pen/dopZxX

Container and items

We only think of 1 container and it’s direct children at any given moment. We should only focus on one container and its direct child items. Flexbox is all about the container and how items inside it take the spaces. When dealing with the container-items pair, we don’t care if the item is a container of another set of elements. We just think of 1 container and it’s direct children.

Flex grow and shrink

When we’re building the grid layout, we need to master another concept of Flexbox—grow and shrink.

flex-grow

Grow defines how the items expand to takes the extra spaces. Grow affects the items when there are empty spaces in the container. Grow defines the ratio each item should expand. Given value 1 on all items mean each one of them should take equal width, or height, depends on the flex-direction.

flex-shrink

Shrink is how each item should squeeze when the container is smaller. Having value 1 on all items means all items shrinks equally.

Applying grow and shrink

Given the following HTML structure:

We can make the header and footer shrink to its content height. Then we make the main content auto expand to take up all the spaces.

You may also find the live code in the following codepen demo.

http://codepen.io/makzan/pen/mJrqzO

Inputs

With the grow and shrink feature, we can define items that shrinks to its content’s width, and the main input will take all the rest of the space.

Time for Action—Creating an input form with prefix and postfix

Follow the steps to create an input form with flexbox.

1. First, we create the following HTML markup.
2. Then we just need few lines of flex code to make it works. Display flex, grow, shrink, and Done.
3. Well, I actually applied more styles to make the input looks nice. I added the following code to archive the screenshot we show at the beginning. They are not our focus, but I include it so you see how we can make our inputs more easily to use by using padding.

Live Demo

You may find the live demo of the code in the following codepen entry.

http://codepen.io/makzan/pen/zGKPRb

Chapter 2—Row–Column grid layout

In this chapter, we explore the basic row-column grid layout by using float.

1. Row–column based layout
2. Floating grid system

Row-columns-based layout

Before building our Flexbox layout, we revisit the traditional float-based grid layout. One of the easiest approach to implement grid is using the row-columns approach.

Time for Action—Build our own minimal float-based grid layout

I assumed we have a basic norimalization or CSS reset applied to the page.

1. At first, we define the following rules that prevents our layout broken by box-model or extra-large images.
2. Then we define the basic row-column properties that construct the foundation.
3. Mobile first design means that we work on the smallest layout first. To make the code simpler, I’m using 4-columns in the code example. In production, we may want to use a 12 or 16 columns. Actually we will switch to 12-columns In next step when using Scss to generate our CSS code.
4. After the small layout, we define the medium which overrides the smaller layout configure if presented in the HTML.

Mobile first design

Mobile first means that during our website planning, we plan the content and layout for the mobile first. Planning for mobile first ensures us to consider the most important thing of our website. The screen is so tiny that we have to think clearly what’s important enough to earn a place there. And what is the most important thing that we put it on top of this tiny screen.

In grid system, mobile first means we use the small-N layout modifiers by default. When we need to build a wider layout, we start using the medium-N, large-N and even xlarge-N. Each one overrides the smaller one. (N ranges from 1 to 12 in the default configuration)

Using our grid system

The following HTML is an example showing our grid system. The HTML code only shows the grid structure. You may need to include the proper HTML structure with <head> and includes the CSS styles.

When running the page in browser, we will see the following screens.

Floating grid with Scss

We have built a very basic grid system. There are many pattern-repeating code when defining the columns. We can use preprocessor to keep the code shorter for easier maintenance.

Just in case you use pure-CSS, here is the CSS version of the code.

Using runtime calc

Preprocessor calculate the column’s width for us. Alternatively, we can use the calc to define formula and let browser calculates the value at runtime. The following is a variant of our code that uses calc and performs the same behaviors in browser.

The CSS version:

At the end of this chapter, we will complete the following website with a Flexbox grid system that we can reuse in other projects. Here is the final result we get:

You can find the final code in the following CodePen demo.

http://codepen.io/makzan/pen/GJjMEL

Implementation of the grid

We have learned the basic functionality of using Flexbox. We also learned the traditional float-based grid layout. Now we are ready to create our own Flexbox layout based on what we learned.

Time for Action—Migrating our grid into Flexbox

1. Our basic CSS hasn’t changed much. We changed the .row into display:flex with flex-wrap. The other parts are same as the float-based grid.
2. Our final outcome is to replace the width in column with something like flex: 0 1 50%; and flex: 0 1 100%;. The percentage acts as the desired width value. But we don’t define the width. We define the flex-basis which is essentially the min-width of the element. Flexbox will calculate how much space each item takes based on this value.
3. It’s very easy to define our mobile-first grid system by using the Scss’s list, loop and variable. In the code, we not only define the columns’ width, we also define classes for auto expand, shrink, vertical direction and horizontal direction. An extra hidden class allows us to hide element in smaller screen.

Implementation of block grid

Block grid is a grid system that we define how many items per roles inside the container. It trys to evenly distribute the items into the container within the items-limitation per role.

/* Block grid */ .block-grid { display: flex; flex-wrap: wrap; } .block-grid > * { flex: 1; } @for $i from 1 through length($screen-sizes) { @media screen and (min-width: nth($breakpoints,$i)){ @for $j from 2 through 10 { .block-grid.#{nth($screen-sizes, $i)}-up-to-#{$j} > * { flex: 0 1 calc( 100% / #{\$j} ); } } } }

HTML that uses the grid:

Result and live demo

You can find the final code in the following CodePen demo.

http://codepen.io/makzan/pen/GJjMEL

If you need the CSS edition, here it is:

http://codepen.io/makzan/pen/vOrzdY

Summary

After going through this short introduction, you should have more understandings on how we can make use of Flexbox when building website. It provides a very simple way to archive some layouts that was difficult to implement.

Useful resources

When you’re applying the flexbox in real projects, you’ll most likely encounter new issues and feel confused. The following list contains several links for you to further explore Flebox.