时间戳

首页 > 解决方案 > 如何准确计算弹性项目的假设主要尺寸 - CSS Spec问题

css - 如何准确计算弹性项目的假设主要尺寸 - CSS Spec问题

问题描述

我有固定宽度为 600 像素的 flex 容器。它的弹性项目有flex-basis: 01 像素的边框和 16 像素的填充。根据规范，此类项目的 flex 基本大小应为 0（基于规范https://www.w3.org/TR/css-flexbox-1/#algo-main-item中的信息，E 部分后的第一段）。此类物品的假设主要尺寸是多少？34 像素（边框 + 填充），0 像素还是 -34 像素？通过阅读规范，我并不完全确定这一点。

现在在根据Spec 第 9.7 节 Resolving flexible lengths计算弹性项目大小时。弹性系数将是flex-grow。在这里，根据我的实验，我猜测假设的主要尺寸实际上是 34 像素（不是 0 或 -34 像素），因此该项目没有被冻结。但是初始可用空间不会是 600px（因为 flex-base size 为 0），而只有 566px（我们从容器大小中提取了假设的主要大小，600px - 34px = 566px）。

这是正确的假设吗？

标签： cssflexboxspecifications

解决方案

是，对的。在规范中，您可以阅读：

假设的主尺寸是根据其使用的最小和最大主尺寸（并将内容框尺寸设置为零）固定的项目的弹性基本尺寸。

所以你的最小尺寸是34px（填充和边框），并且项目不会像你注意到的那样被冻结。如果您正在使用flex-shrink:1（这是默认值）和flex-grow:0

.box {
  border:1px solid;
  display:flex;
  width:600px;
}
.box div {
  padding:16px;
  border:1px solid red;
  background:blue;
  flex-shrink:1;
  flex-basis:0;
}

.box span {
  width:100%;
  flex-grow:1;
  flex-basis:100%;
  background:green;
}
<div class="box">
<div></div> <span></span>
</div>

正如你所看到的，元素不会因为它被冻结而收缩。

如果使用弹性收缩因子：任何弹性基本尺寸小于其假设主尺寸的项目

推荐阅读