flex 宽度计算

最新推荐文章于 2024-07-26 13:50:11 发布

swen_xiong

最新推荐文章于 2024-07-26 13:50:11 发布

阅读量1.3k

点赞数 2

分类专栏： flex 文章标签： flex css html

本文链接：https://blog.csdn.net/Cexo_Ln_Wfn/article/details/107933875

版权

本文详细探讨了Flex布局中关于宽度计算的问题，包括主轴有多余空间分配和主轴空间不足两种情况的计算规则。通过实例解析了如何在不同场景下计算Flex子元素的宽度，并强调在计算过程中`flex-grow`和`flex-shrink`属性的重要性。

摘要由CSDN通过智能技术生成

最近看到一些关于flex的面试题，发现其中关于宽度计算的问题比较多，网上的解释也有些不太完整，于是自己总结了一下。若对 flex 不是很了解，可以看一下阮一峰老师的教程 Flex 布局教程：语法篇

flex 属性值

一般来说，使用 flex 时都是作为简写方式，类似于 background 属性可以包含 background-image background-repeat 等属性。flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。其中：

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。

flex 的属性介绍可以查看MDN，以下是部分摘抄：

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

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

一个无单位数( <number> ): 它会被当作 <flex-grow> 的值。

一个有效的宽度(width)值: 它会被当作 <flex-basis> 的值。

关键字 none ，auto 或 initial .

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

一个无单位数：它会被当作 <flex-shrink> 的值。

一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。

第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。

第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。