在Web设计的世界中，创建功能性和视觉吸引力的用户界面（UI）是成功网站的关键方面。

UI的一个关键组成部分是搜索栏，允许用户快速找到他们想要的东西（我们都去过那里！）。

在这篇博客文章中，我们将通过向您展示如何使用它来从头开始构建搜索栏，从而进入Flexbox的基础知识。本分步指南将有助于 flex （ wink ）您的UI技能，并为您提供了轻松构建搜索栏的知识。

先决条件

为了能够正确理解这一点，您需要熟悉Flexbox可以提供的。如果您需要刷新内存，请检查this guide。为了更好地理解这一点，我建议打开您的预填充代码编辑器，启用Live Preview＆Code。

所以现在让我们代码！

1. HTML结构

首先。让我们考虑一下我们希望它的外观。我们的搜索栏将包含一个图标（ð），用户可以输入和搜索按钮的实际框。

<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。：您的SRC属性可能有所不同（因为我的图标是在本地设置的），因此请随时添加链接。

所有这3个元素一起构成最终搜索栏 - 这就是为什么它们放置在主类中的原因。

2. CSS结构

下一步是设计上面的每个元素，从类searchBar.

让我们首先将显示属性设置为Inline-Flex，这使该元素成为Flex容器，并允许其子元素连续布置。 flex属性将以元素占用所有可用空间（1）的方式设置，它将能够收缩（1），并且最小宽度为300px。

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

接下来，这是border-radius属性。我们将以10px的半径设置，使元素具有圆角外观。边界属性设置了1px宽度的固体边界。

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

我们还将将overflow属性添加到隐藏中，以确保如果元素的内容溢出其边界，则它们将被隐藏。

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

我们的.icon将是最容易的样式，其宽度和高度设置为24px，填充为0.8REM。

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

样式中的下一个是我们的.searchBox。通过将边框属性设置为0，我们告诉浏览器删除元素上可能存在的任何边框。 Flex属性设置为1，这意味着该元素将占用其父容器中的所有可用空间。这使得.searchBox元素可以灵活且适应其父的大小，从而允许其填充任何未使用的空间并创建响应式设计。

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

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