在网页前端开发中，顶部搜索栏和下方内容区的自适应布局是非常常见的需求，使用Flexbox的justify-content属性配合flex属性可以高效实现这类布局效果，既能保证搜索栏的位置和尺寸符合设计预期，也能让内容区根据剩余空间自动调整。
整体布局结构设计
我们首先搭建最外层容器，将顶部搜索栏区域和下方内容区都作为外层容器的子元素，外层容器设置为Flex容器，这样可以直接应用Flexbox的相关属性控制子元素的排列和尺寸分配。
基础HTML结构如下：
<div class="page-container">
<div class="search-bar">
<input type="text" placeholder="请输入搜索内容" />
<button>搜索</button>
</div>
<div class="content-area">
<p>这里是页面内容区域</p>
</div>
</div>
Flexbox核心属性配置
外层容器属性设置
给外层容器page-container添加Flex相关样式，设置display: flex开启Flex布局，同时通过flex-direction: column让子元素纵向排列，因为搜索栏在上方，内容区在下方，是垂直方向的布局。
justify-content属性在这里的作用是控制子元素在垂直方向上的对齐和空间分配，我们设置为flex-start，让搜索栏和内容区都从容器顶部开始排列，不会在垂直方向产生额外的间隙。
.page-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
height: 100vh;
padding: 16px;
box-sizing: border-box;
}
搜索栏区域样式
搜索栏区域不需要占据剩余空间，我们给它设置固定的高度或者根据内部元素自适应高度，同时可以在搜索栏内部也使用Flex布局，让输入框和按钮水平排列，这里同样可以用justify-content控制内部元素的对齐方式。
.search-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 8px;
margin-bottom: 16px;
}
.search-bar input {
flex: 1;
height: 36px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 12px;
font-size: 14px;
}
.search-bar button {
height: 36px;
padding: 0 20px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
内容区flex属性配置
内容区需要占据外层容器剩余的所有空间，这里就用到了flex属性，给content-area设置flex: 1，这个属性是flex-grow、flex-shrink、flex-basis的简写，默认情况下flex:1等价于flex-grow:1; flex-shrink:1; flex-basis:0%，表示内容区会放大占据剩余空间，当空间不足时也会等比例缩小，基础尺寸为0。
.content-area {
flex: 1;
padding: 16px;
background-color: #fff;
border: 1px solid #eee;
border-radius: 8px;
overflow-y: auto;
}
不同场景的调整方案
如果需求是搜索栏固定在顶部，内容区滚动而搜索栏不随之滚动，只需要给search-bar添加position: sticky; top: 0;样式，同时保证外层容器没有设置overflow: hidden即可。
如果搜索栏需要居中显示，只需要把搜索栏内部的justify-content属性改为center，输入框和按钮就会在搜索栏内部水平居中排列。
如果需要搜索栏在左侧，内容区在右侧的水平布局，只需要把外层容器的flex-direction改为row，然后调整搜索栏的flex属性为固定值，内容区设置flex:1即可，justify-content可以根据需求设置为flex-start让两个区域都靠左排列。
完整示例代码
以下是完整的可运行示例，你可以直接复制到HTML文件中查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox自适应布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.page-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
height: 100vh;
padding: 16px;
}
.search-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 8px;
margin-bottom: 16px;
}
.search-bar input {
flex: 1;
height: 36px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 12px;
font-size: 14px;
}
.search-bar button {
height: 36px;
padding: 0 20px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.content-area {
flex: 1;
padding: 16px;
background-color: #fff;
border: 1px solid #eee;
border-radius: 8px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="page-container">
<div class="search-bar">
<input type="text" placeholder="请输入搜索内容" />
<button>搜索</button>
</div>
<div class="content-area">
<p>这里是页面内容区域，当内容超过内容区高度时，会自动出现滚动条，而顶部搜索栏会保持在原来的位置。</p>
<p>测试内容1</p>
<p>测试内容2</p>
<p>测试内容3</p>
<p>测试内容4</p>
<p>测试内容5</p>
<p>测试内容6</p>
<p>测试内容7</p>
<p>测试内容8</p>
<p>测试内容9</p>
<p>测试内容10</p>
</div>
</div>
</body>
</html>
CSS布局Flexboxjustify-contentflex自适应布局修改时间：2026-06-12 18:42:55