边距如何影响 Flexbox 布局中的 Flex-Grow 大小调整?
Dec 17, 2024 pm 10:00 PM<h2>使用 Flex-Grow
调整 Flex 元素的大小在 Flexbox 布局中,Flex 项目根据其
flex-grow 调整大小属性,指定每个项目应占用多少可用空间。但是,某些因素可能会影响 Flex 项目的计算大小,包括内容和边距。
问题概述
.numbers { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; } .button { display: flex; flex-grow: 1; justify-content: center; align-items: center; margin: 5px; border-radius: 5px; border: 1px solid gray; background: rgba(255, 255, 255, 0.2); cursor: pointer; } #number0 { flex-grow: 2; } #colon { flex-grow: 1; }
登录后复制
<div class="numbers"> <div class="row"> <div class="button number">
登录后复制
在此示例中,我们期望“0”按钮的宽度是另一个按钮的两倍按钮和冒号按钮的宽度为一半。但是,这些按钮的对齐方式似乎略有偏差。
问题原因
出现此问题的原因是每行上的可用空间由下式确定:按钮的总宽度和应用于按钮的边距。在我们的示例中,前三行各有两个水平边距,而第四行只有一个。这会导致第四行比其他行拥有更多的可用空间,从而影响弹性项目之间的空间分配。
使用 Flex-Basis 实现更可靠的大小调整要解决这个问题,建议使用 flex-basis
而不是
flex-grow.button { flex-basis: 33.33%; } #number0 { flex-basis: calc(66.67% + 10px); } * { box-sizing: border-box; }
登录后复制
以上是边距如何影响 Flexbox 布局中的 Flex-Grow 大小调整?的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章
两个点博物馆:邦格荒地地点指南
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林

热门文章
两个点博物馆:邦格荒地地点指南
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)