在Flex布局中，flex属性是一个简写属性，它可以接受三个值：flex-grow、flex-shrink和flex-basis。当你设置flex:110时，你实际上是在设置flex-grow:1、flex-shrink:1和flex-basis:0。而未设置flex-basis时，默认值是auto。这两种设置会导致不同的效果，原因如下：flex-basis的作用：flex-basis定义了fle

本文深入探讨Flex布局中`flex: 1 1 0`与未设置`flex-basis`的区别。`flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`的简写，其中`flex-basis`定义项目在主轴方向上的初始大小。`flex: 1 1 0`设置初始大小为0，再根据`flex-grow`分配剩余空间；而未设置`flex-basis`时，默认值为`auto`，项目初始大小由内容决定，再参与空间分配。两者最终宽度可能相同，但初始大小和增长方式不同，导致布局效果差异。理解`flex-basis`的设置对灵活运用Flex布局至关重要。

深入理解 Flex 布局中 flex: 1 1 0 与未设置 flex-basis 的区别

Flex 布局的 flex 属性是一个简写属性，包含 flex-grow、flex-shrink 和 flex-basis 三个子属性。本文将详细分析设置 flex: 1 1 0 与未设置 flex-basis (即使用默认值) 的差异，并解释为何 flex-basis: 0 和 flex-basis: auto 会产生不同的布局结果。

问题概述

在实际应用中，经常会遇到这样的情况：使用 flex: 1 1 0 时，元素宽度保持不变；而使用 flex: 1 1 auto 时，元素宽度会被调整。这种差异的原因是什么呢？

关键知识点

理解 flex-basis 至关重要：

• flex-basis 类似于 width（flex-direction: row）或 height（flex-direction: column），定义元素的初始大小。
• 当 flex-basis 和 width 或 height 同时存在时，width 或 height 将被忽略。
• Flex 属性的默认值：

  <code>  flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;</code>

场景分析

场景一：元素使用默认值，其他元素 flex-grow: 1

如果一个元素使用默认的 flex-basis: auto，其初始大小将是其内容的自然大小（例如，图片的实际宽度）。如果其他元素设置了 flex-grow: 1，且所有元素的总宽度超过容器宽度，则所有元素都会根据 flex-shrink 比例进行收缩。

场景二：元素使用默认值，其他元素 flex-basis: 0 和 flex-grow: 1

在这种情况下，使用默认 flex-basis: auto 的元素的初始大小仍然是其内容的自然大小。而 flex-basis: 0 的元素初始大小为 0。如果所有元素总宽度小于容器宽度，则 flex-grow: 1 的元素会按比例分配剩余空间。

结论

flex: 1 1 0 和未设置 flex-basis (即 flex-basis: auto) 的关键区别在于元素的初始大小。flex-basis: 0 将元素的初始大小设置为 0，使其完全由 flex-grow 和 flex-shrink 控制。而 flex-basis: auto 使用元素内容的自然大小作为初始大小，这会影响最终的布局结果。 因此，根据实际需求选择合适的 flex-basis 值至关重要，才能灵活掌控 Flex 布局。 理解这些差异，有助于在实际项目中更有效地运用 Flex 布局。

终于介绍完啦！小伙伴们，这篇关于《在Flex布局中，flex属性是一个简写属性，它可以接受三个值：flex-grow、flex-shrink和flex-basis。当你设置flex:110时，你实际上是在设置flex-grow:1、flex-shrink:1和flex-basis:0。而未设置flex-basis时，默认值是auto。这两种设置会导致不同的效果，原因如下：flex-basis的作用：flex-basis定义了flex项目在主轴方向上的初始大小。当设置为0时，flex项目会尽可能小地开始，然后根据flex-grow和flex-shrink来调整大小。当flex-basis为auto时，flex项目的初始大小会根据其内容或指定的宽度/高度来决定。flex:110的效果：flex-grow:1表示该flex项目会根据剩余空间成比例地增长。flex-shrink:1表示该flex项目会根据需要收缩。flex-basis:0表示该flex项目的初始大小为0，因此它会从0开始增长或收缩。未设置flex-basis的效果：如果未设置flex-basis，它会默认使用auto。flex-grow:1和flex-shrink:1仍然有效，但flex-basis:auto会使flex项目根据其内容或指定的宽度/高度来决定初始大小。示例：假设有两个flex项目，容器宽度为500px，每个项目内容宽度为100px。设置flex:110：每个项目的初始大小为0，然后根据flex-grow:1平分剩余空间（500px），每个项目最终宽度为250px。未设置flex-basis（即flex:11auto）：每个项目的初始大小为100px，然后根据flex-grow:1平分剩余空间（500px-2*100px=300px），每个项目最终宽度为250px（100px+150px）。从上面的示例可以看出，虽然最终宽度可能相同，但初始大小和增长方式是不同的。因此，设置flex:110和未设置flex-basis会导致不同的布局效果。》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！