Defining Flex-Containers with Compass

Several years in the making, the flexbox layout is finally supported across most of today's modern web browsers. In turn, flexbox is now a viable tool for web design, web pages, and applications. Projects such as Google's Material CSS project, which is based on material design, utilize the flex layout as opposed to the traditional grid layout.

Although flexbox is an effective solution to styling web pages, past struggles with browser support mean that little is known about the flex layout and the sheer power that it holds. By referencing caniuse.com however, you will see that flexbox is now supported by pretty much all major browsers, thus making knowledge of the layout imperative to those who wish to stay current in web development. Therefore, I have created this guide to help you become more familiar with the flex layout. Specifically, I am going to guide you through the process of creating basic flex-containers, and show you how flexbox lays out child items, or flex-items, across different axises.

I want to quickly note that basic knowledge of the Compass CSS framework is necessary to benefit from this tutorial. Let's get started by quickly reviewing the image below as it's important to your complete understanding.

As you can see, flexbox consists of 2 axises - a main axis, and a cross axis. By default, flexbox will display items in rows that run from left to right along the main axis. On the other hand, the flex layout can display items in columns which stack on top of one another. For the sake of this article, we will only be dealing with the flex-containers, and how they can be manipulated. Throughout the tutorial, feel free to reference Compass' documentation on flexbox, which provides information on the mixins we will be covering.

Working with Flex-Container Flex Flow

@include display-flex()

First, let's take a look at my initial example, which shows a basic flex-container with four flex-items.

See the Pen Sp-flexbox-ex1 by Thomas J Greco (@thomasgreco) on CodePen.

It is important to note that I have imported Compass inside my SCSS code, as well as the Compass CSS3 module. Flexbox is new in CSS3, so we need to import this library in order to utilize different mixins. Additionally, these mixins will compile our CSS code to include those pesky vendor prefixes, so we can easily harness cross-browser support for flexbox.

Once I have imported this library, all I have to do is pass the display-flex() mixin to define a flex container. As a result of this, we now have a flex-container with items that will run from left to right, and shrink as the viewport decreases.

@include flex-direction()

In the first example, I opted out of passing in any values to flex-direction. By default, the display-flex() mixin will automatically create a flex-container as a row. If instead you wanted to create a column that displayed flex-items stacked on top of one another, you would simply need to pass in the column value into Compass’ flex-direction() mixin.

In the example below, I have added a second flex-container to our previous codepen that will be displayed as a column.

See the Pen Sp-flexbox-ex2 by Thomas J Greco (@thomasgreco) on CodePen.

I mentioned earlier that flexbox makes use of the main and cross axes when creating layouts. Whereas our first example uses flexbox’s default row layout, our next flex-container will create a column on the cross axis, which will stack each child flex-item from the top and then stack downwards. We should know that the flex-items in the column will stretch as wide as possible since we did not specify any sort of width these child items.

If we take a look at the example below, you can see what happens when I define these flex-items to take a width of 200px.

See the Pen Sp-flexbox-ex3 by Thomas J Greco (@thomasgreco) on CodePen.

I continue to mention the main and cross axis because they are so integral in understanding how flex-container works. To better delineate this, I am going to pass in the row-reverse, and column-reverse values to our display-flex() mixin.

Below I have embedded a fork of our previous example, however I modified it so our flex-containers are now displayed in reverse order. As a result of this, the default functionality of the main axis has been modified, as our flex-container will now run from left to right. Additionally, we see the same thing happen to our cross axis in our column layout. As we already know, the column property lays out items from top to bottom, however the column-reverse value flips this axis, and gives us the result seen above.

See the Pen Sp-flexbox-ex2 by Thomas J Greco (@thomasgreco) on CodePen.

As you learn more about flexbox, you can use your knowledge of these axis in correlation other for both flex-containers and flex-items to truly manipulate the layout of a page.

Go forth and use your knowledge!

And thus concludes my primer on basic flexbox usage with the Compass CSS framework. By now, you are hopefully beginning to see the benefits of using the flex layout during development. Although we only covered the basics, display:flex gives you more control over a page's layout than you can imagine! I have attached some of the best resources I believe to be out there on flexbox. As always, please let me know if you have any questions, or concerns, as I will be sure to get back to you immediately!