In this tutorial, you will learn how to build a common component on product landing pages. Have you seen marketing pages that display feature images and their descriptions in alternating order? Flexbox makes this pattern really easy to build out, and no, you don’t have to change the HTML in order to achieve this.
The particular feature list we’ll be building is the one found on alfredapp.com. If you inspect the elements on that site via your browser’s DevTools, you will see that the layout was achieved using floats. I’ll show you how to achieve the exact same layout with Flexbox and how to make it responsive too!
You can grab the starter code from Jsfiddle and copy it to your local text editor, or click the Fork button to fork it into a new fiddle.
If you look at the HTML pane, you will see that each feature is enclosed in a
div element with a class of
feature, and within it is contained the image and its description.
In the CSS pane, we have all the styles we need minus the Flexbox bits. That’s what we’re going to cover in the sections below.
Make each feature a flex container
The first thing we need to do is make each feature a flex container. We can do this by setting
display: flex on the
This causes the image and text to be placed flush against each other along the main axis. There is no space to distribute along the main axis since the images fill up all the available space, and the text is squished together in an unsightly manner.
We can give the images and text a consistent width using the
width property as shown below:
Now, the text takes up 40% of the space along the
main-axis while the image takes 55% of space. This leaves 5% space which is placed at the end since the default value of
justify-content on a flex container is
flex-start. We can put this space between the flex items with
The remaining 5% space is now between the flex items. Notice that the images are really stretched out at this point. Normally, when you give an image a width or a height in CSS, the browser resizes the image so that it maintains its aspect ratio.
In this case though, the aspect ratio is ignored and the image is stretched to its full height despite the fact that we set a width of 55% on it in the CSS. The property controlling this behaviour is
align-items whose default value is
We can make the browser respect the aspect ratio of the image once again by setting
flex-start. Instead of stretching the flex items, they will be flushed against the start edge of the cross axis.
The next thing to do is to reverse the order of the flex items in the second and fouth feature list items so that the images come before the text. We can achieve that without changing our markup in any way. Notice that the second and fourth features have a class of
reverse applied to them, so we can affect each one using the
To reverse the arrangement of the flex items, we need to use the
flex-direction property on the flex container. Its default value is
row which makes the main axis go in the direction of the text (left to right in English language).
Other valid values for the
flex-direction property are:
row-reverse: main axis goes from right to left.
column: main axis goes in the block direction, from top to bottom.
column-reverse: main axis goes from bottom to top.
If we set the value of
row-reverse, the direction of the main axis is reversed. This gives the effect of changing the order of the flex items, but really, it’s only the direction of the main axis that changed.
Now the feature list looks identical to what we set out to achieve, at least on the desktop view. On mobile, it doesn’t look too good yet.
Fix mobile responsiveness
You can use the Ctrl+Shift+M shortcut in Firefox or Ctrl+Shift+I followed by Ctrl+Shift+M in Chrome to see how it currently looks on a mobile screen.
We need to make sure the image and text take the full width of the viewport and that the image sits above the text.
Let’s make the image sit on top of the text first. We can do this by changing the value of
column-reverse. This makes the main axis go from bottom to top instead of left to right.
The images now sit atop the text, but they do not take the full width of the container. This is due to the
width which we set on each flex item earlier. We can easily change the
width property of both the image and text to
100% so that they take the full width of the viewport.
Everything looks great! We’ve been able to achieve a responsive feature list using only a handful of Flexbox properties.
In this article, we’ve looked at how to use Flexbox to make a responsive feature list. If you want to practice on your own, find other websites that implement a feature list in the manner of the one we just built and try to recreate it.
In the next tutorial, I’ll cover some of the lesser understood Flexbox properties including
flex-basis, and I’ll show you how to use them to build another real world component. Till next time!