Modern-day websites, especially web-apps, have layouts as sophisticated as those of native iOS or Android apps. But web-apps face the additional challenge of needing to adapt to whichever screens they'd be viewed on; be it mobile, desktop or tablets. Achieving such responsive layouts beyond the basic linear flow of HTML and CSS can be challenging . This is where flexbox with media queries can help, and this guide is a breakdown for how to approach building such layouts with them.
The case-study this tutorial will use as an example is Airbnb , and being a popular website it has a complex layout as well, where mobile and desktop views differ significantly. It may seem daunting to replicate at first, but Flexbox makes it achievable (Here is a quick refresher for how flexbox works), and thus the first step is to identify the individual flexbox containers, consisting of child elements:
(Scroll-based animations influencing structure of page wont be accounted for as it is beyond the scope of this tutorial)
Flexbox, media queries and other layout related CSS styling can be handled by a single utility CSS file, flexbox.css. These are some examples, utility classes of these will be used in the tutorial:
And in the tutorial a simple a simple css class for outlining the containers will be used, otherwise writing direct CSS will be avoided as much as possible, except for padding and some margin between flexbox containers.
Now, breaking down the page into individual flexbox containers, the first container to be tackled is the header, which consists of a row with its children spaced apart to each end, with some padding.
The middle and right child items are flexbox row containers themselves, though without much spacing. Now that it's clear how the layout of the header is structured, the following is how it can be developed:
Next is the search-panel.
The parent has a single child in the middle, the child is also a flex container with the children having variable width. Here, flex-basis can be used to conveniently determine how much size each of them takes up, for which flexbox.css has utility classes present.
Then for the middle container with options for house-types.
It is a row with three items spaced at the ends, with the first one taking up the majority of space. Notably, it seems to have scroll functionality. So a flexbox.css class called scrollX will be used to enable it.
Now there's the row of items with stay-examples.
This is a row consisting of four items with some space, and likely multiple such rows will be there. So, it is appropriate to use flex-wrap.
Noticeably the mobile view has different versions of these elements, along with some extra elements and some missing. Flexbox.css has some classes that change function based on which device (and thus, whichever media query applies) the user is viewing the app on, which helps in creating dynamic layouts that adapt to screens with ease. These classes are generally suffixed with "-xs" or "-sm" depending on which screen size they apply to. So, classes like "hide-xs" and "show-xs" will be used to hide and display elements accordingly, with some others changing flex-basis.
With that, we've successfully recreated a responsive layout akin to Airbnb's. Here's the Codepen for you to review and experiment with. Check out this GIF demonstrating the layout's responsiveness in action:
