Mastering Search Bars with Flexbox: A Step-by-Step Guide

In the world of web design, creating functional and visually appealing user interfaces (UI) is a key aspect of a successful website.

One crucial component of UI is the search bar, allowing users to quickly find what they're looking for (we've all been there!).

In this blog post, we'll be diving into the basics of flexbox by showing you how to use it to build a search bar from scratch. This step-by-step guide will help flex (wink) your UI skills and equip you with the knowledge to build a search bar with ease.

Prerequisities

In order to be able to understand this properly, you will need to be familiar with what flexbox can offer. If you need to refresh your memory, check this guide. To be able to better understand this, I suggest to open your prefferred code editor, enable the live preview & code along.

So now let's code!

1. HTML structure

First things first. Let's think about how we want it to look. Our search bar will contain an icon (🔎 ), the actual box where the user can type in and the search button.

<div class="searchBar">
        <img class="icon" src="./img/search.png" alt="search">
        <input class="searchBox" type="search" name="search" placeholder="Enter your search here">
        <input class="searchButton" type="submit" value="Search" name="search">
</div>

p.s.: your src attribute might be different (as my icon is set up locally), so feel free to also add a link.

All these 3 elements together will form the final search bar - that's why they are placed inside the main class searchBar.

2. CSS structure

The next step is to design each of the elements above, starting with the class searchBar.

Let's start by setting the display property to inline-flex, which makes the element a flex container and allows its child elements to be laid out in a row. The flex property will be set in such way that the element will take up all the available space (1), it will be able to shrink (1) and it will have a minimum width of 300px.

.searchBar {
    display: inline-flex;
    flex: 1 1 300px;
}

Next, it's the border-radius property. We'll set this with a radius of 10px, giving the element a rounded corner appearance. The border property sets a solid border of 1px width in grey.

.searchBar {
    display: inline-flex;
    flex: 1 1 300px;
    border-radius: 10px;
    border: 1px solid grey;
}

We will also add the overflow property to hidden, to make sure that if the contents of the element overflow its boundaries they will be hidden.

.searchBar {
    display: inline-flex;
    flex: 1 1 300px;
    border-radius: 10px;
    border: 1px solid grey;
    overflow: hidden;
}

Our .icon will be the easiest to style, with its width and height set at 24px and a padding of 0.8rem.

.icon {
    width: 24px;
    height: 24px;
    padding: 0.8rem;
}

Next in style is our .searchBox. By setting the border property to 0, we are telling the browser to remove any border that may be present on the element. The flex property is set to 1, which means that the element will take up all the available space within its parent container. This makes the .searchBox element flexible and adaptable to the size of its parent, allowing it to fill up any unused space and create a responsive design.

.searchBox {
    border: 0;
    flex: 1;
}

To finish up our code, let's add the styling for the .searchButton as well.

.searchButton {
    color: white;
    background-color: darkcyan;
    border: 0;
    padding: 0.8rem;
    border-radius: 8px;
}

That's it! Easy, right?

Conclusion

To sum up, creating a search bar with flexbox is a straightforward process that involves setting up the appropriate HTML structure and styling with CSS.

The step-by-step guide provided in this post should help you understand how to use flexbox to build a responsive and visually appealing search bar. With the techniques and code snippets shared in this post, you should now have the tools and knowledge you need to start building your own search bars with flexbox.

Whether you're a beginner or an experienced web developer, mastering the use of flexbox is an essential skill for creating modern, responsive web designs. So, give it a try and start building your own search bar today!

Cover photo by Christopher Gower on Unsplash