前端面试题

2024-03-21 16:25| 来源: 网络整理| 查看: 265

flex 1

flex: 1 是一个 CSS 属性，它用于设置 flexbox 容器中某个项目的伸缩性。具体来说，flex: 1 表示该项目可以在剩余空间中伸缩，并且占据剩余空间的比例为 1:1，也就是说，如果容器中有多个项目都设置了 flex: 1，它们会平均分配剩余空间。举个例子，假设有一个 flexbox 容器，它的宽度为 800px，里面有三个子元素，分别为 A、B 和 C。A 和 C 都设置了宽度为 200px，而 B 设置了 flex: 1。这时，容器中剩余的空间为 400px，B 会自动填充这个空间，使得 A、B 和 C 三个元素的总宽度为 800px。需要注意的是，flex: 1 实际上是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写形式，其中 flex-grow 表示项目在剩余空间中的增长比例，flex-shrink 表示项目在空间不足时的缩小比例，而 flex-basis 表示项目在没有设置宽度时的初始宽度。因此，如果需要分别设置这三个属性，可以使用 flex-grow、flex-shrink 和 flex-basis 来实现。

flex 属性

以下是 flex 属性的三个关键字所对应的属性：

flex-grow 属性：用来设置弹性盒子的放大比例，默认值为 0。当需要将弹性盒子内的空白区域按照一定比例分配到各个项目上时，可以设置 flex-grow 属性。它的取值为一个非负整数，表示项目的放大比例，如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。如果其中一个项目的 flex-grow 属性为 2，剩余项目的 flex-grow 属性都为 1，则前者的项目占据的空间将是后者的两倍。 flex-shrink 属性：用来设置弹性盒子的缩小比例，默认值为 1。当弹性盒子内部空间不足以放置所有项目时，可以设置 flex-shrink 属性，来决定项目的缩小比例。它的取值为一个非负整数或者 none，表示项目的缩小比例，如果所有项目的 flex-shrink 属性都为 1，则它们将等分缺少的空间。如果其中一个项目的 flex-shrink 属性为 0，剩余项目的 flex-shrink 属性都为 1，则前者的项目不会被缩小。 flex-basis 属性：用来设置弹性盒子的基准值，默认值为 auto。当需要指定弹性盒子项的初始大小时，可以设置 flex-basis 属性。它的取值可以是一个长度值（比如 100px），或者是一个百分比（比如 50%），或者是 auto。在计算弹性盒子的剩余空间时，会将 flex-basis 属性的值加入到计算中。如果所有弹性盒子项的 flex-basis 属性都为 auto，则它们的大小将由内容自动决定。

【本文地址】

公司简介

联系我们