Flex布局子元素宽度比例调整方法

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《flex布局子元素宽度比例不对怎么调？用flex-grow和flex-basis分配比例》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

正确设置flex-grow和flex-basis是实现子元素宽度比例控制的关键。默认情况下子元素不会自动扩展，需通过flex属性显式配置：flex-grow定义剩余空间分配权重，flex-basis设定初始主轴尺寸。推荐使用flex简写（如flex:1、flex:2）使子项按比例分配容器宽度，当设置不同基础宽度时（如flex:1 1 100px与flex:2 1 150px），子元素在保留最小宽度的同时按权重伸展，从而精准控制布局。

在使用 CSS Flex 布局时，如果子元素的宽度比例不符合预期，通常是因为没有正确设置 flex-grow 和 flex-basis。默认情况下，flex 容器中的子项不会按比例分配剩余空间，需要显式配置才能实现理想的宽度分布。

理解 flex-grow 与 flex-basis 的作用

flex-grow 控制子元素如何分配容器中剩余的空间。值越大，占据的剩余空间越多。默认值为 0，表示不扩展。

flex-basis 定义子元素在分配多余空间之前的初始主轴尺寸（类似于设置 width）。可以是具体像素值（如 200px）或百分比（如 50%），也可设为 auto。

当两者结合使用时，能精准控制子元素的宽度比例。

通过 flex 属性设置比例分配

推荐直接使用 flex 简写属性来同时设置 flex-grow、flex-shrink 和 flex-basis，避免遗漏。

• 父容器设置 display: flex
• 第一个子元素设置 flex: 1
• 第二个子元素设置 flex: 2

此时，每个子项的 flex-basis 默认为 0，flex-grow 分别为 1 和 2，它们将根据比例瓜分容器全部宽度。

指定基础宽度后再按比例扩展

若希望子元素有一个最小宽度（如 100px），再按比例分配剩余空间，应明确设置 flex-basis。

• 子元素 A：flex: 1 1 100px → 初始宽 100px，后续按比例增长
• 子元素 B：flex: 2 1 150px → 初始宽 150px，增长权重是 A 的两倍

这样即使初始宽度不同，也能在剩余空间中按设定比例伸展。

基本上就这些。关键是把 flex-basis 设准，再用 flex-grow 定义扩展权重，就能实现精确的宽度比例控制。不复杂但容易忽略细节。

今天关于《Flex布局子元素宽度比例调整方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！