flex:1能自动均分容器宽度，因它是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，使子元素在主轴上等比伸缩；设置display:flex后，所有flex:1的子元素无论内容长短均平分空间，响应式下也保持等宽；通过gap可安全添加间距，避免margin溢出问题，是现代布局推荐方案。
当需要让多个单行元素在容器中等宽排列时，传统方法如浮动或行内块元素常因间隙、计算不均等问题导致布局困难。使用 flex:1 可以轻松实现子元素自动平均分配父容器宽度，是一种简洁高效的解决方案。
Flexbox 布局中，将父容器设为 display: flex，其子元素会默认沿主轴方向排列。给每个子元素设置 flex: 1，意味着它们都将“伸缩”以均分可用空间，无需关心具体宽度数值。
关键点：
以下是一个三列等宽按钮组的常见场景：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <button class="item">选项一</button> <button class="item">选项二</button> <button class="item">选项三</button> </div>
CSS 样式如下：
.container {
display: flex;
}
.item {
flex: 1;
}
此时三个按钮将完全均分父容器宽度，无须设置 width 或处理 margin 折行问题。
虽然 flex:1 很方便，但需注意以下几点以避免意外布局：
例如添加间距：
.container {
display: flex;
gap: 8px;
}
.container > * {
flex: 1;
}
基本上就这些。用 flex:1 处理等宽排列，简单直接，兼容性好，是现代 CSS 布局的推荐做法。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
239
收藏
