Creating responsive and fluid layouts with flexbox, rem units, and mobile-first approach

In today's world, where users access websites on different devices with varying screen sizes and resolutions, it's essential to design layouts that are responsive and fluid. In this blog post, we'll cover the basics of using flexbox, rem units, and media-query mobile-first approach to create layouts that adapt seamlessly to different screen sizes.

What is Flexbox?

Flexbox is a powerful CSS layout module that allows us to create flexible and responsive layouts. It works by using flex containers and flex items. Flex containers are used to define the flexbox layout, while flex items are the individual elements inside the container.

Using flexbox, we can easily create layouts that adapt to different screen sizes and resolutions. It also makes it easier to align and position elements within the layout.

The Mobile First Approach

Before we dive into the details of using flexbox and rem units, it's essential to understand the concept of the mobile-first approach. This approach involves designing for mobile devices first and then building up to larger screens with media queries.

The mobile-first approach ensures that our designs are optimized for the majority of users who access the web on mobile devices. It also helps to keep our code lean and efficient by focusing on the essentials first and then adding more complexity as needed.

Using Rem Units

Rem units are a relative length unit that is based on the font-size of the root element. By using rem units, we can create layouts that are more flexible and adaptable to different screen sizes.

To use rem units effectively, we need to set the font-size on the root element in rem units. This way, all other elements on the page will be sized relative to the font-size on the root element.

Creating a Simple Layout

Now that we have a basic understanding of flexbox and rem units let's use them to create a simple two-column layout with an image and text.

Here's the HTML code for our layout:

<div class="container">
  <div class="image">
    <img src="img/img-1.jpg" alt="Image" />
  </div>
  <div class="content">
    <h2>Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
      dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur
      adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
    </p>
  </div>
</div>

And here's the CSS code:

html {
  font-size: 62.5%; /* 1rem = 10px */
}

/* Use border-box box-sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Flex container */
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Stretch flex items to fill container */
  gap: 2rem;
}

/* Flex items */
.image,
.content {
  flex-basis: 100%;
  padding: 1rem;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
}

.image img {
  max-width: 100%; /* Make image take the max width of its parent container, the .image div */
}

/* Mobile-first breakpoint */
@media (min-width: 768px) {
  /* Flex items take up full width on large screens */
  .image,
  .content {
    flex-basis: calc(50% - 1rem);
    font-size: 1.8rem;
  }
}

In the example, the base font-size of 10px is set on the html element, and the box-sizing property is set to border-box for all elements. This ensures that any padding or borders added to an element are included in the element's total width and height. The layout is created using flexbox, where a container is set to display flex and the child items are set to take up half of the available width on larger screens, with a gap added between them using the gap property.

The mobile-first breakpoint is set at a minimum width of 768px. At this breakpoint, the flex items take up full width on small screens by setting flex-basis: 100% on the .image and .content classes. This mobile-first approach ensures you start with styles for small screens and add styles as the screen size increases.

Conclusion

In this article, we've explored how flexbox, the rem units, and the mobile-first approach can be used to create responsive and fluid layouts. By using flexbox, we can easily create complex layouts with different columns and alignment options. The rem approach allows us to make the layout more flexible and scalable by using a mobile-first approach and applying the font size to the root element. This ensures that the layout is optimized for smaller screens and gradually enhanced for larger screens.