完美解决:flex布局中设置宽度被压缩的问题
Posted 时光机上敲代码
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了完美解决:flex布局中设置宽度被压缩的问题相关的知识,希望对你有一定的参考价值。
问题描述:
在父级中设置了display:flex;父元素宽度不够的时候,子元素就算设置的宽度,也会被压缩;
产生原因:
当子元素设置固定宽度,如果整体宽度不足时,会把固定宽度给压缩
解决方法: 给固定宽度的元素添加flex-shrink:0
flex-shrink:0;
实例解析:
flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中A、B、C 显式定义了 flex-shrink 为 1,D、E 定义了 flex-shrink 为 2,所以计算出来总共将剩余空间分成了 7 份,其中 A、B、C 占 1 份,D、E 占 2 份,即1:1:1:2:2
我们可以看到父容器定义为 500px,子项被定义为 120px,子项相加之后即为 600 px,超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子,所以加权综合可得 100*1+100*1+100*1+100*2+100*2=700px。
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少:
A 被移除溢出量:(100*1/700)*100,即约等于14px B 被移除溢出量:(100*1/700)*100,即约等于14px C 被移除溢出量:(100*1/700)*100,即约等于14px D 被移除溢出量:(100*2/700)*100,即约等于28px E 被移除溢出量:(100*2/700)*100,即约等于28px
最后A、B、C、D、E的实际宽度分别为:120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px,此外,这个宽度是包含边框的。
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
如何使用自动布局在一个宽度相同的 uitableviewcell 中设置八个 uilabel
【中文标题】如何使用自动布局在一个宽度相同的 uitableviewcell 中设置八个 uilabel【英文标题】:how to set eight uilabel in one uitableviewcell with same width using auto layout 【发布时间】:2019-01-13 08:27:17 【问题描述】:在搜索和应用许多结果后,我的问题没有所需的解决方案。
如何设置标签,以便在表格视图单元格中显示具有相同字体大小的所有标签。
我需要在水平的一个表格视图单元格中显示 5 个标签和 2 个按钮。
请帮助我如何设置所有标签。
【问题讨论】:
水平使用stackview并使每个元素与第一个元素的宽度相等 不确定您的问题到底是什么? .您是否在情节提要或您使用的代码中将所有字体大小设置为相同?或者,请在您的问题中添加更多详细信息。 【参考方案1】:请按照我的步骤。
第一步:
在 storyboard tableViewCell 中添加 5 个标签和 2 个按钮。
第二步:
用按钮选择所有label
,然后嵌入stackview
第三步:
选择stackView
并添加autolayout
。 Leading
0 和trailing
0。
第四步:
选择attribute inspector
并设置alignment
和distribution
如图。
设置font
。
它可能对您有所帮助。谢谢。
【讨论】:
以上是关于完美解决:flex布局中设置宽度被压缩的问题的主要内容,如果未能解决你的问题,请参考以下文章
Flexbox布局:如何在多行中设置每个项目相同的宽度? [复制]