HTML表单控件和按钮的布局是前端开发中的常见需求，合理的布局能让页面结构更清晰，用户操作更顺畅。Grid和Flexbox是现代CSS中两种主流的布局方案，都能很好地适配各类控件的排列场景。
Flexbox布局实现HTML控件排列
Flexbox是单维度布局模型，适合处理一行或一列内的控件排列，对于表单控件、按钮这类线性排列的场景非常友好。
基础横向排列
将容器设置为flex布局，子控件会默认沿主轴横向排列，通过justify-content可以调整水平对齐方式，align-items调整垂直对齐方式。
/* 表单容器样式 */
.form-container {
display: flex;
/* 水平居中排列 */
justify-content: center;
/* 垂直居中对齐 */
align-items: center;
gap: 12px;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
/* 输入框样式 */
.form-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
/* 按钮样式 */
.submit-btn {
padding: 8px 20px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
<div class="form-container">
<input type="text" class="form-input" placeholder="请输入用户名">
<input type="password" class="form-input" placeholder="请输入密码">
<button class="submit-btn">登录</button>
</div>
纵向排列与换行适配
如果需要在小屏幕下让控件换行排列，可以设置flex-wrap: wrap，同时调整间隙和对齐方式。
.form-container-vertical {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
.form-label {
font-size: 14px;
color: #333;
}
.form-input-full {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
.btn-group {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.cancel-btn {
padding: 8px 20px;
background-color: #fff;
color: #666;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
<div class="form-container-vertical">
<div>
<label class="form-label">用户名</label>
<input type="text" class="form-input-full" placeholder="请输入用户名">
</div>
<div>
<label class="form-label">密码</label>
<input type="password" class="form-input-full" placeholder="请输入密码">
</div>
<div class="btn-group">
<button class="cancel-btn">取消</button>
<button class="submit-btn">确认</button>
</div>
</div>
Grid布局实现HTML控件排列
Grid是二维布局模型，适合处理需要同时控制行和列的复杂控件布局，比如多列表单、规整的按钮矩阵等场景。
多列表单布局
通过grid-template-columns定义列宽，gap设置控件之间的间隙，能快速实现多列对齐的表单布局。
.grid-form {
display: grid;
/* 两列布局，每列占剩余空间的一半 */
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.grid-form-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.grid-form-label {
font-size: 14px;
color: #333;
}
.grid-form-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
/* 让提交按钮占据整行 */
.grid-form-submit {
grid-column: 1 / 3;
padding: 10px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
<div class="grid-form">
<div class="grid-form-item">
<label class="grid-form-label">姓名</label>
<input type="text" class="grid-form-input" placeholder="请输入姓名">
</div>
<div class="grid-form-item">
<label class="grid-form-label">手机号</label>
<input type="tel" class="grid-form-input" placeholder="请输入手机号">
</div>
<div class="grid-form-item">
<label class="grid-form-label">邮箱</label>
<input type="email" class="grid-form-input" placeholder="请输入邮箱">
</div>
<div class="grid-form-item">
<label class="grid-form-label">地址</label>
<input type="text" class="grid-form-input" placeholder="请输入地址">
</div>
<button class="grid-form-submit">提交信息</button>
</div>
按钮矩阵布局
Grid可以轻松实现规整的按钮矩阵，比如计算器按键、操作面板按钮等场景。
.btn-matrix {
display: grid;
/* 4列等宽布局 */
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
max-width: 300px;
margin: 0 auto;
background-color: #f5f5f5;
border-radius: 8px;
}
.matrix-btn {
padding: 15px;
border: none;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
font-size: 16px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.matrix-btn:hover {
background-color: #f0f0f0;
}
/* 特殊按钮样式 */
.matrix-btn-primary {
background-color: #1890ff;
color: #fff;
}
.matrix-btn-primary:hover {
background-color: #096dd9;
}
<div class="btn-matrix">
<button class="matrix-btn">7</button>
<button class="matrix-btn">8</button>
<button class="matrix-btn">9</button>
<button class="matrix-btn">+</button>
<button class="matrix-btn">4</button>
<button class="matrix-btn">5</button>
<button class="matrix-btn">6</button>
<button class="matrix-btn">-</button>
<button class="matrix-btn">1</button>
<button class="matrix-btn">2</button>
<button class="matrix-btn">3</button>
<button class="matrix-btn">*</button>
<button class="matrix-btn">0</button>
<button class="matrix-btn">.</button>
<button class="matrix-btn matrix-btn-primary">=</button>
<button class="matrix-btn">/</button>
</div>
两种布局方案的选择建议
如果控件只需要沿一个方向排列，比如横向的按钮组、纵向的表单项，优先选择Flexbox，代码更简洁，适配更灵活。如果控件需要同时控制行和列，比如多列表单、规整的矩阵布局，优先选择Grid，能更精准地控制布局结构。实际开发中也可以结合使用，比如用Grid做整体页面框架，用Flexbox处理局部控件的排列。