flexbox 收缩算法(下)

作者 : 开心源码 本文共3139个字,预计阅读时间需要8分钟 发布时间: 2022-05-13 共140人阅读

前几天对 flex 的深入学习,笔者写了一篇flex的收缩算法文章,文章刚出,就被朋友甩来一道flex题,咋地!要考察我?小题一道我还能不会,哈哈哈!不过我相信一定有人不会这道题,尤其复杂的flex计算情况,指定懵。于是这篇文章就诞生了,教你计算flex item的大小。不对,是教未来男盆友哒??

找事呢?

就是这道题,先不要看答案,尝试花3分钟分析,给出答案,而后再对照下边的答案。

题目在线:查看在线代码

image

正确答案:
左25px, →175px,你做对了吗?

image

简要分析:

  • 左:扩张因子1,收缩因子1;
  • 右:扩张因子1,收缩因子为0,不收缩,自由宽度150px;

右不能收缩可扩张,可扩张权值:200 – 150 = 50px,
50 / 扩张因子之和 2 = 25px,左右各扩张25px。

考察点:

  • 对 flex 属性的理解程度
  • 对 flex item 的计算规则

原本不想讲基础的,可是不说基础,恐怕没办法对这道题进行细致分析,有些小盆友就算看了我上面的简要分析,还是不知所以然。要不我们就来点MDN文档吧。

你应该知道的 flex 属性

题中的flex:

.left {    flex: 1;    // …}.right {    flex: 1 0 150px;    // …}

flex 单属性,和三个属性,你都清楚是什么吗,都代表什么意思吗?不知道还怎样做我蓝盆友。

咦惹的表情图

flex的基础详情,来自MDN:

/* 基础属性 */flex: auto;flex: initial;flex: none;flex: 2;/* 一个值, 无单位正数:flex-grow */flex: 2;/* 一个值, 宽度/高度: flex-basis */flex: 10em;flex: 30px;/* 两个值: flex-grow | flex-basis */flex: 1 30px;/* 两个值: flex-grow | flex-shrink */flex: 2 2;/* 三个值: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;/* Global values */flex: inherit;flex: initial;flex: unset;

flex 属性可以指定1个,2个或者3个值。

基础语法:

  • auto 元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto”。
  • initial 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为”flex: 0 1 auto”。
  • none 元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为”flex: 0 0 auto”。

单值语法:
值必需为以下其中之一:

  • 一个无单位数: 它会被当作 flex-grow 的值。
  • 一个有效的宽度值: 它会被当作 flex-basis 的值。

双值语法:
第一个值必需为一个无单位数,并且它会被当作 flex-grow 的值。第二个值必需为以下之一:

  • 一个无单位数:它会被当作 flex-shrink 的值。
  • 一个有效的宽度值: 它会被当作 flex-basis 的值。

三值语法:

  • 第一个值必需为一个无单位数,并且它会被当作 flex-grow 的值。
  • 第二个值必需为一个无单位数,并且它会被当作 flex-shrink 的值。
  • 第三个值必需为一个有效的宽度值, 并且它会被当作 flex-basis 的值。

再来看题中的 flex:

.left {    flex: 1;     // …}.right {    flex: 1 0 150px;     // …}
  • flex: 1; 它会被当做 flex-grow: 1;
  • flex: 1 0 150px; 它会被当做 flex-grow:1; flow-shrink: 0; flex-basis: 150px;

这里明白了,以后不论几个值的flex,你都能一眼看清楚。

复杂的 flex item 究竟怎样计算

针对 flex 的子元素的宽度究竟怎样计算,其实跟
在主轴方向上控制flex子元素的尺寸和伸缩性有关。了解flex子元素如何工作的关键是了解有多少东西参加影响flex子元素

  • flex-grow
  • flex-shrink
  • flex-basis

flex item 的基本大小

  1. flex-basis设置为auto吗,这个flex子元素设置了宽度吗?假如设置了, flex子元素的大小将会基于设置的宽度.
  2. flex-basis 设为 auto 还是content (在支持的浏览器中)? 假如是auto, flex子元素的大小为原始大小.
  3. flex-basis是不为0的长度单位吗?假如是这样那这就是flex子元素的大小.
  4. flex-basis 设为 0呢? 假如是这样,则flex子元素的大小不在空间分配计算的考虑之内.

有可用空间吗

  1. 把所有的flex子元素的宽度相加,总和能否小于flex容器的总宽度?假如是这样,那么你有多余空间,flex-grow会发挥作用.
  2. 把所有的flex子元素的宽度相加,总和能否大于flex容器的总宽度?假如是这样,那么你有溢出空间,flex-shrink会发挥作用.

具体假如发挥作用,请参考笔者的上一篇文章flex收缩算法(一)

空余空间和溢出空间的其余解决方式?

  • 空间添加到子元素中
  • 空间增加到子元素之间或者附近 (对准属性justify-content

有个例外:flex: 1 1 0

一个容器,多个子元素,子元素没有设定宽度的情况下,flex: 1 1 0; flex子元素的自然大小计算值是0,意味着所有空间都用来争夺,并且所有flex子元素具备相同的flex-grow值,它们flex子元素每个都取得相等的空间分配。 最终结果是三个宽度相等的可伸缩 flex子元素。

再来看这道题

请问left和right的宽度分别是多少?

<document>     <style type="text/css">        .container{            width: 200px;            height: 200px;            display: flex;            flex-direction: row;            align-items: stretch;            }        .left{            flex: 1;            border: 1px solid #ccc;        }        .right{            flex: 1 0 150px;            border: 1px solid #ccc;        }    </style>     <div class="container">         <div class="left"></div>         <div class="right"></div>    </div></document>

第一步:分析容器和元素

一个宽度200px的容器,内部两个子元素,容器设置了 align-items: stretch; 使两个子元素的高度撑满容器高度,这个属性暂时跟宽度没关系,先不论它。

  • 左元素:flex: 1,它会被当做 flex-grow: 1; flex-shrink: 1; flex-basis: auto; 扩张因子1,收缩因子1;
  • 右元素:flex: 1 0 150px;,它会被当做 flex-grow: 1; flex-shrink: 0; flex-basis: 150px;:扩张因子1,收缩因子为0,不收缩,自由宽度150px;

第二步:分析子元素的收缩性

  • 左元素可以伸缩和扩张,没有自由宽度
  • 右元素不能收缩可扩张,自由宽度 150px

第三步:计算可扩张权益值和扩张因子和

扩张权益值:200 – 150 = 50px
扩张因子和:1 + 1 = 2

第四步:计算左右两个子元素的实际宽度

  • 左元素 0 + 50px / 2 * 1 = 25px
  • 右元素 150px + 50 / 2 * 1 = 175px

左、右元素各扩张25px,总宽度还是200px。算完啦,蓝盆友,你学会了吗?

如上内容均为自己总结,难免会有错误或者者认识偏差,如有问题,希望大家留言指正,以免误人,若有什么问题请留言,会尽力答复!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » flexbox 收缩算法(下)

发表回复