如何让Flexbox搜索框在Flexbox按钮组上方居中且自适应？

我懂你不想直接抄成品、想自己啃下这个布局问题的心态——咱们就基于你现有的代码来调整，完美解决输入框居中+自适应的需求。

先说说你原有代码的问题 #

1. 输入框用了绝对定位，脱离了文档流，没法和按钮组联动，而且固定的left:41%在不同屏幕尺寸下很容易错位；
2. 输入框和按钮组分属不同的容器，没法统一控制垂直居中关系；
3. 按钮组的flex布局没有设置换行规则，小屏幕下会挤在一起。

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="positions.css">
</head>
<body>
    <form action="https://google.com/search" class="search-form">
        <div class="search-container">
            <div id="input_field">
                <input type="text" name="q" placeholder="Search Google">
            </div>
            <div class="button-group">
                <input type="submit" value="Google Search" class="search-btn">
                <input type="submit" value="I’m Feeling Lucky" class="lucky-btn">
            </div>
        </div>
    </form>
</body>
</html>

CSS部分

/* 重置浏览器默认样式，避免布局干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* 让整个搜索区域垂直+水平居中在页面 */
.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 1rem; /* 小屏幕左右留边，避免内容贴边 */
}

/* 输入框和按钮组的容器，垂直排列元素 */
.search-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 输入框和按钮之间的间距 */
    width: 100%;
    max-width: 600px; /* 限制最大宽度，避免大屏幕下太宽 */
}

/* 输入框自适应设置 */
#input_field input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

/* 输入框交互效果（可选，贴近谷歌风格） */
#input_field input:hover,
#input_field input:focus {
    border-color: #b0b3b8;
    box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}

/* 按钮组支持自动换行 */
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem; /* 按钮之间的间距 */
    width: 100%;
}

/* 按钮基础样式 */
.search-btn, .lucky-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    background-color: #f8f9fa;
    font-size: 0.9rem;
    color: #3c4043;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* 按钮交互效果（可选） */
.search-btn:hover, .lucky-btn:hover {
    border-color: #dadce0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

关键改动说明 #

• 统一容器：把输入框移入form，并新增search-container包裹输入框和按钮组，让它们成为一个整体，方便用flex控制布局；
• 替换绝对定位：用外层search-form的flex布局实现整个搜索区域的垂直居中，输入框不再脱离文档流，能和按钮组联动；
• 输入框自适应：输入框设置width:100%，配合父容器的max-width，小屏幕时自动缩窄，大屏幕时不超过设定宽度；
• 按钮自动换行：按钮组添加flex-wrap:wrap，页面缩小时按钮会自动换行，不会挤压变形；
• 细节优化：添加了hover/focus交互效果，更贴近谷歌搜索栏的体验，你可以根据需求调整样式。

这样调整后，输入框会稳定地在按钮组上方居中，页面缩小的时候输入框会自适应变窄，按钮也会自动换行，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user10575420