How To Create a Responsive Flex Layout Using TailwindCSS

Learn how to create a responsive flex layout using TailwindCSS.
Cover image of the blog

In the previous post, we covered how to set up your development environment and get started with TailwindCSS.

Now that our foundation is set, it's time to focus on one of the most important aspects of web development: creating a responsive flex layout. A responsive website provides a seamless user experience on a variety of devices, from smartphones to laptops and everything in between.

One key property for building responsive websites is CSS flex(also called Flexbox). Flex is a layout model that allows us to easily create and organize our layouts, ensuring that they look great and function properly on any device. In this post, we'll learn how to use it to create responsive layouts with the help of TailwindCSS but before we jump into the Tailwind classes, let's understand how traditional CSS handles flexbox.

What is Flexbox?

Flexbox is a powerful layout model for creating layouts. It allows you to easily align elements in rows or columns, and adjust their size and position based on the available space. 

With Flexbox, you can create complex, responsive layouts with just a few lines of code, making it a great choice for developers who want to build responsive websites. 

Additionally, Flexbox makes it easy to adjust the layout of your page as the size of the screen changes, ensuring that your content is always displayed correctly on any device. 

For that, you have to start by defining the property as flex:

After that, you have to define the direction for aligning the item, it can be a row or column.

Flex direction image

For it align vertically, you have to add the flex-direction as a column.

Flex direction column

For the above image, the code looks like this:

Align-Items and Justify-Content Properties

The flex and direction properties in CSS are used to specify the layout of elements within a flex container. However, these properties alone may not be sufficient to achieve the desired layout, especially in more complex scenarios. This is where the Align-Items and Justify-Content properties come into play.

Align-items determines the alignment of items along the cross-axis of the flex container, while justify-content determines the alignment of items along the main axis. These properties allow you to more precisely control the positioning and layout of items within a flex container, enabling you to create more complex and sophisticated layouts.

Let’s take an example.

Image of flex-direction row

When you set the “flex-direction” property to “row”, the x-axis refers to the horizontal axis and the y-axis refers to the vertical axis.

The justify-content property aligns items along the x-axis (horizontally), while the align-items property aligns items along the y-axis (vertically). For example, if you set justify-content: center, the items in the flex container will be aligned horizontally in the center of the container. Similarly, if you set align-items: center, the items will be aligned vertically in the center of the container.

It's important to note that the direction of the x-axis and y-axis depends on the value of the flex-direction property. When you set the “flex-direction” property to “row”, the x-axis refers to the horizontal axis and the y-axis refers to the vertical axis. This is important to keep in mind when working with justify-content property.

Let's use another example to understand it better.

Image of flex-direction column

When flex-direction is defined as columns, the x-axis is known for align-items and the y-axis is known for justify-content.

Flex-Wrap Property

The flex-wrap property in CSS determines whether flex items are laid out in a single line or wrapped onto multiple lines. 

When set to "nowrap", all flex items are laid out in a single line, even if this requires them to overflow the flex container. And when set to "wrap", flex items will be wrapped onto multiple lines as necessary to fit within the flex container. 

This can be useful for adapting the layout of a flex container to different screen sizes or for creating grid-like layouts.

Getting Started with Responsive Designs

When you visit a website, you will notice that the layout differs between mobile and desktop displays.

It's all because it should be responsive dependent on screen size, and for that, developers often employ CSS attributes like rem, em, and, most significantly, media queries. Media queries allow you to create several breakpoints based on the screen size to set distinct layouts.

Here is one example, 

In this case, we've defined a card class with a width of just 100% up to 480px.

Similarly, you can set breakpoints based on media queries by adding the max-width or min-width to them.

Based on the Freecodecamp post, here are some common breakpoints that you can adopt.

  1. 320px — 480px: Mobile devices
  2. 481px — 768px: iPads, Tablets
  3. 769px — 1024px: Small screens, laptops
  4. 1025px — 1200px: Desktops, large screens
  5. 1201px and more —  Extra large screens, TV.

Flexbox and Breakpoints in Tailwind CSS: An In-Depth Look

Let's go deeper into how we can use flexbox inside TailwindCSS.

Using flex in TailwindCSS is straightforward.

We simply defined flex and applied a direction to a parent div as flex-row. This makes child divs use the parent div to position themselves within a row.

The output looks like this:

Image of items in a row

Also, there are predefined breakpoints as well inside the TailwindCSS framework which makes creating responsive designs easier. These breakpoint correspond to the screen size and not the element size.

Image of breakpoints in Tailwind

If you want to use a min-width up to 640px, you should only have to add the “sm” property and so on.

Suppose you want to create a div of different sizes based on different screens, you simply have to define breakpoints using TailwindCSS like this:

Here the width of the div is 16 by default (4rem), and in the medium size, it changes to 32 and 48 on the large screens.

These breakpoints are customizable via the tailwind.config.js file.

Now, let’s take a more concise example and see how you can build the responsive flex layout using TailwindCSS, where our desktop view will have horizontal items while our mobile layout should be vertical to accommodate smaller screen sizes as shown below

Desktop view: 

Image of a desktop view layout

Mobile View:

Image of mobile view layout

The code looks like this:

The code is simple enough, we have used several flex properties and breakpoints to make the responsive flex layout.

Creating a Flex Wrapper Component

You can also create a parent component and wrap a child component and add styles properties to it. This allows us to reuse the wrapper component to implement responsive layouts in multiple places easily. 

Let’s see an example.

Create a ParentContainer.js file and write the above code. It will take some props and apply some style properties to the div.

Now inside App.js, use the ParentContainer component and write some content inside the p tag.  The properties that we have passed here will get used by the ParentContainer component.

Here is the output.

Image of output

Go from Design to Responsive Code

You can also generate responsive code directly from your design files using the plugin.

Locofy automatically picks up your Figma auto layout settings and constraints to generate responsive code with flex properties. Additionally, the auto layout facilitates the design process and allows you to create designs faster with cleaner structures.

Image of auto layout example

What’s more is that you can also configure layout direction for different breakpoints using the plugin, enabling you to directly go from design to pixel-perfect responsive code.

If you want to learn more about how to convert your Figma design to React, React Native, HTML/CSS, Nextjs, Vue, and more, check out our docs.

Keep your loco mode on!
Stay updated on the latest Locofy announcements and product updates

© 2024, Locofy Pte Ltd. All Rights Reserved.