gpt4 book ai didi

css - 当宽度大于 flex 容器时如何计算 flex 收缩?

转载 作者:行者123 更新时间:2023-12-04 00:04:28 25 4
gpt4 key购买 nike

<分区>

MDN states以下内容:

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

我去W3C了解具体是怎么计算的。在这里,我使用了以下源代码作为示例。

* {
margin: 0;
}

.p {
display: flex;
margin: 0 auto;
width: 100px;
height: 50vh;
border: 4px solid red;
}

.c {
width: 250%;
border: 4px solid green;
}
<div class="p">
<div class="c"></div>
</div>

这里根据W3C , flex 收缩因子用于 flex 元素.c

c. Distribute free space proportional to the flex factors.

  • If the remaining free space is zero

    Do nothing.

  • If using the flex shrink factor

    For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item’s target main size to its flex base size minus a fraction of the absolute value of the remaining free space proportional to the ratio.

Note this may result in a negative inner main size; it will be corrected in the next step.

  • 否则

    什么都不做。


如果使用上面的源代码按照这个规范计算,会像下面这样,item's target main size 会是负值。

这个计算有些地方是错误的,因为实际上浏览器将 flex 元素扩展到整个 flex 容器。

  1. 伸缩收缩系数:

    [flex shrink factor] * [flex base size] => 1 * 250% => 250px

  2. 缩放的柔性收缩因子之和:1
  3. 元素的目标主要尺寸:

    [flex base size] - ([剩余可用空间] * ([scaled flex shrink factor]/[sum of the scaled flex shrink factors]))

    => 250% - (100px * (250%/1)) => 250px - (100px * 250px) => -24750px(预期结果:100px)


问题

  1. 这个计算有什么问题?
  2. 另外,如何通过计算 flex 元素的宽度来获得整个 flex 容器的宽度?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com