HTML 代碼如下：

CSS 扁平化搜索框通常使用 input 元素和 button 元素實現，代碼如下：

<!-- HTML -->
<form action="#" method="get" class="search-form">
<input type="text" placeholder="搜索..." class="search-input">
<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>

CSS 代碼如下：

/* CSS */
.search-form {
display: flex;
align-items: center;
justify-content: center;
margin: 1em 0;
}
.search-input {
border: none;
border-radius: 4px;
height: 40px;
padding: 0.5em;
font-size: 1em;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1;
margin-right: 0.5em;
transition: all 0.3s ease-in-out;
background-color: #f5f5f5;
color: #333;
}
.search-input:focus {
box-shadow: none;
background-color: #fff;
color: #333;
}
.search-submit {
border: none;
border-radius: 4px;
height: 40px;
width: 40px;
background-color: #333;
color: #fff;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.search-submit:hover {
background-color: #ccc;
color: #333;
}
.search-submit i {
font-size: 1.2em;
}

以上代碼會生成一個具有簡潔、美觀的搜索框樣式，且響應式設計友好。用戶可以根據實際需要對樣式進行更改，定制出符合自己風格的搜索框。