了解屈曲成长，屈曲障碍和弹性基础

深入理解CSS flex-grow、flex-shrink和flex-basis属性的交互作用。 当我们应用CSS属性时，幕后会发生很多事情。例如，假设我们有如下HTML：

<div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

然后我们编写一些CSS：

.parent {
  display: flex;
}

实际上，除了上面这行CSS代码之外，我们还隐式地应用了一系列属性到.child元素上，如同我们自己编写了以下样式：

.child {
  flex: 0 1 auto; /* 默认flex值 */
}

这是因为某些属性具有默认值，这些默认值旨在被我们覆盖。如果不了解这些隐式应用的样式，布局可能会变得非常混乱且难以管理。

flex属性是一个简写CSS属性，它同时设置了三个独立的CSS属性。因此，上面的简写等同于：

.child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

简写属性将多个CSS属性捆绑在一起，方便一次性编写多个属性，就像background属性一样。

虽然简写属性可能令人困惑，但对于flexbox，建议使用简写形式，因为flex属性及其子属性之间存在复杂的交互作用。

默认样式非常有用，因为在大多数情况下，我们不需要了解这些flexbox属性的细节。例如，使用flexbox时，我们通常会这样写：

.parent {
  display: flex;
  justify-content: space-between;
}

我们甚至不需要关心子元素或应用于它们的样式。但这只是flexbox的冰山一角。

如果我们想深入了解flexbox，包括flex-grow、flex-shrink和flex-basis属性的工作原理，以及如何利用它们创建更复杂的布局，该如何做呢？

让我们从简化后的概述开始，并回到应用于子元素的默认flex属性：

.child {
  flex: 0 1 auto;
}

这些默认样式告诉子元素如何拉伸和收缩。我通常将这些简写属性理解为：

/* 我在脑海中如何思考上面的规则 */

.child {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

/* 或者... */

.child {
  flex: [最大值] [最小值] [理想尺寸];
}

第一个值flex-grow默认为0，这意味着元素不会扩展（大多数情况下）。元素大小取决于其内容。例如：

.parent {
  display: flex;
}

如果我们将flex-grow属性的默认值从0更改为1：

.child {
  flex: 1 1 auto;
}

那么所有元素将平均分配.parent元素的空间，但前提是其内容长度相同。这等同于：

.child {
  flex-grow: 1;
}

如果我们想让其中一个元素比其他元素增长更多，我们可以这样做：

.child-three {
  flex: 3 1 auto;
}

/* 或者... */

.child-three {
  flex-grow: 3;
}

flex-shrink是简写中的第二个值：

.child {
  flex: 0 1 auto; /* flex-shrink = 1 */
}

flex-shrink告诉浏览器元素的最小尺寸。默认值为1，表示始终占用相同空间。如果将其设置为0：

.child {
  flex: 0 0 auto;
}

则元素不会收缩。

flex-basis是默认情况下添加到flex简写中的最后一个值，它告诉元素保持理想大小。默认值为auto，表示“使用我的高度或宽度”。

当我们设置flex-basis为1000px时：

.child-three {
  flex: 0 1 1000px;
}

我们告诉浏览器尝试占用1000px的空间。如果不可能，则该元素将根据其他元素按比例占用空间。

如果我们想阻止该元素收缩：

.child-three {
  flex: 0 0 1000px;
}

设置flex-wrap属性会改变布局：

.parent {
  display: flex;
  flex-wrap: wrap;
}

总而言之：

• 尽量使用flex简写。
• 使用简写时，记住最大值、最小值和理想尺寸。
• 元素内容也会影响这些值的工作方式。

以上是了解屈曲成长，屈曲障碍和弹性基础的详细内容。更多信息请关注PHP中文网其他相关文章！