This is Part 3 in my series entitled, Developing for the Mobile Web. In this article and my corresponding podcast, I’m going to talk all about CSS Flexbox. If you missed out on Parts 1 and 2 of this series, here are the links below:Part 1: CSS Media Queries Part 2: Bootstrap
With the rise and popularity of Bootstrap and the increased need to design our projects for the mobile web, CSS Flexbox came on the scene around 2017. I would say the idea of Flexbox felt a bit peculiar at first for front-end developers…. and stirred up questions such as “How can CSS make our work mobile-friendly??” Truth is, CSS Flexbox is another way we can control the layout of our projects and create responsive designs.
Short for ‘Flexible Box Module’, Flexbox is different than CSS Media Queries and Bootstrap in that it is strictly two-dimensional. Flexbox only deals with two elements to make our projects responsive and mobile-friendly: 1) rows and 2) columns. Everything in CSS Flexbox is determined and adjusted by its rows and columns. These elements are represented in Flexbox by the main axis and the cross axis.
The main axis of a Flexbox container is the primary axis where the elements on our webpage are to be laid out. The cross axis is the opposite of the main axis. For example, if your main axis in your Flexbox design represents a row, the cross axis will represent the column. The same is true if your main axis represents a column, then the cross axis represents the row. Let’s dive into some of the basics of CSS Flexbox and how we can implement Flexbox into our projects.
In using Flexbox, the direction of the main axis (whether row or column) is assigned with the flex-direction property. The flex-direction property can be given any of the following values:
1) row — displaying the elements in row format from left to right. This value is the default for the flex-direction property.
2) row-reverse — displaying elements from right to left
3) column — displaying the elements in column format from top to bottom
4) column-reverse — displaying elements from bottom to top
See the following example:
flex-direction: row | row-reverse | column | column-reverse;
In this example, I have a CSS class called ‘container’ and I have set the display property to flex. In one of my previous articles, I used the display property to help center a 'div' element on a page. This is the same display property I’m using here in this example, but I’ve simply given it a different value in order to tell my CSS that I want this container to be flexible. Applying the flex value to the display property denotes that this is a flexbox container. I’ll then give the container the flex-direction property in order to assign the main axis of my flexbox layout. The main axis can be set to any of these values in the example above. Based on the value you give the flex-direction property, the cross axis is automatically defined and is the opposite of the main axis.
Next, let’s go over the how to align the elements within our Flexbox container. These are the featured visual elements in your project. These are the elements we’re trying to make responsive and mobile-friendly, such as a photos for a photo gallery wall or blog post previews. How do we style these elements for our flexbox layout?
One thing to note here is that flex items will, by default try to squeeze themselves onto one line, regardless of how many items there are. This is possibly a negative if you have several elements, or if you have elements that are supposed to be a specific size. There are several ways that this can be adjusted. See the following example:
flex-wrap: nowrap | wrap | wrap-reverse;
The flex-wrap property allows us to tell flexbox that it’s ok to let items that don’t fit onto the first row or column to fall to the next row or column. You can set the following values to the flex-wrap property:
1) nowrap — “Flexbox, squeeze all the elements into one row/column”. This is the default value.
2) wrap — “Flexbox, go ahead and let some of the elements fall into another row/column and align them from left-to-right/top-to-bottom.”
3) wrap-reverse — “Flexbox, let the items that don’t fit go to another row/column, but align them from right-to-left/bottom-to-top.”
A real nifty shortcut in CSS flexbox combines the two flexbox styles we just discussed, flex-direction property and the flex-wrap property, into one line. This is the flex-flow property:
flex-flow: row-reverse wrap;
In this example above, I’ll apply the flex-flow property to the ‘parent’ container class and give it the values row-reverse and wrap. This means that I want the main axis of my flexbox layout to be in a row, with the elements in that row aligned from right to left. And if all of the elements don’t fit on one row, to let those items go into the next row. With the flex-flow property, we can also apply the same values as the flex-direction and flex-wrap properties: row, row-reverse, column, column-reverse, nowrap, wrap, and wrap-reverse.
I want to discuss a couple more important features of CSS Flexbox. Another property we can use in CSS Flexbox is justify-content. The justify-content property is used to align items along the main axis of your Flexbox container. Remember, your Flexbox container can either be a row or a column. We can apply the following values to the justify-content property:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Let’s go over each value that can be used in the justify-content property here:
1) flex-start: items are aligned toward the start of the flex-direction
2) flex-end: items are aligned toward the end of the flex-direction
3) center: this one’s pretty obvious…items are centered
4) space-between: items are evenly distributed
5) space-around: items are distributed with an equal, fixed amount of space around each item
6) space-evenly: items are distributed evenly, but with an even amount of space around each item (different than number 5).
To align your elements across the cross axis of your Flexbox layout, you’ll need the align-items property. The align-items property is basically the same as the justify-content property, but instead of aligning elements on the main axis, this property aligns items on the cross axis.
align-items: stretch | flex-start | flex-end | center
Here are some of the values that we can apply to the align-items property:
1) stretch: stretches the elements to fill the container
2) flex-start: the elements are placed at the start of the container
3) flex-end: the elements are placed at the end of the container
4) center: the elements are centered across the container
All of these features of CSS Flexbox, when used together in your project, can help make your project responsive, mobile friendly, and well, ‘flexible’ to whatever device or viewport the user has. In my last article and podcast, I discussed how easy Bootstrap is to set up and use, and I feel that CSS Flexbox is just as easy to get started with. I personally don’t really have a preference on whether to use CSS Media Queries, CSS Flexbox, or Bootstrap. But rather I prefer to decide on which method to use, based on how the method will maximize the responsiveness of my project and how will it benefit my project most.
There is so much more to CSS Flexbox, Bootstrap and CSS Media Queries than I have been able to touch on here in my articles and podcast episodes. These are some of the very basics of how you can use these responsive and mobile-friendly techniques in your project. If you want to know more about how you can use any of these techniques in developing for the mobile web, check out Mozilla Developer Network and getbootstrap.com for more helpful tips and tutorials.
You can experiment with all of these CSS Flexbox examples I discussed in this article here in Codepen:
I hope you have enjoyed reading this series on Developing for the Mobile-Web. If you haven't already, be sure to check out my podcast, A Cup of Code Podcast, available for listening on Spotify, Apple Podcasts, Google Podcasts, and anywhere else podcasts are available!