有人可以解释一下什么是 flex 属性吗？

Question

你好，目前我正在学习 flexbox，我看过很多教程，但我不知道 flex 属性有什么作用？一些解释它的作用的解释和链接将非常有帮助。谢谢。

Answer 1

如T.埃文斯提到的，flex属性被简写其它三个属性：flex-grow，flex-shrink，和flex-basis。您可以通过flex按以下顺序为属性提供三个值来设置每个属性的值：

flex: [flex-grow] [flex-shrink] [flex-basis] 

例如， flex: 0 1 auto;

现在，让我们简要回顾一下这三个属性中的每一个的含义。

弹性增长

我们在 flex-box 的子元素上使用这个属性。它设置元素与其他元素成比例的大小。的默认值为flex-grow0，因此设置flex-grow为大于 0 会使该元素大于其他元素。（不过，您不能将其设置为负数。）

示例 1：在这里，我们使用flex-grow使一个元素比另一个元素大一倍。flex-grow一个元素上的A为 2，另一个元素上的A为 1 意味着这些元素将具有 2 比 1 的大小比例。将一个设置flex-grow为 8，另一个设置为 4 会做完全相同的事情，因为 2:1 与 8:4 的比率相同。

flex: [flex-grow] [flex-shrink] [flex-basis] 

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#big {
  flex-grow: 2;
  background-color: lavender;
}

#small {
  flex-grow: 1;
  background-color: lightblue;
}

JSFiddle

示例 2：在这里，我们flex-grow只设置一个元素，而将另一个元素保留为默认值 0。这会使元素增长以填充尽可能多的空间。我们可以使用任何值flex-grow，只要另一个元素有flex-grow: 0;

<div id="flexbox">
  <div id="big">BIG</div>
  <div id="small">SMALL</div>
</div>

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#big {
  flex-grow: 5;
  background-color: lavender;
}

#small {
  /* flex-grow is 0 by default */
  background-color: lightblue;
}

JSFiddle

弹性收缩

此属性的工作方式与 类似flex-grow，但比率描述了一个元素应该比另一个元素小多少。此外，默认值为 1。

示例：如果我们将一个元素设置flex-shrink为 2，而将其他元素设置为 1，当父元素太小而无法舒适地容纳每个元素并且子元素必须缩小时，该元素将比其他元素缩小得更多。

<div id="flexbox">
  <div id="big">BIG</div>
  <div id="small">SMALL</div>
</div>

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#flexbox div {
  flex-grow: 1;
  border: 1px solid purple;
  background-color: lavender;
}

#flexbox #small {
  flex-shrink: 4;
  background-color: lightblue;
}

JSFiddle

弹性基础

此属性设置元素的初始大小。它的值可以是auto，它会自动设置初始大小，也可以是像素数或其他大小单位（例如 % 或 vw）。默认值为auto。

示例：在这里，我们将大多数元素的初始大小设置为 50px，并将它们设置flex-grow为 1，以便它们会增长以填充空间。但是，一个元素的 aflex-basis为 100px，因此它会比其他元素大。尝试调整窗口大小以查看此示例的行为。

<div id="flexbox">
  <div>NORMAL</div>
  <div id="small">SMALL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
</div>

#flexbox {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#flexbox div {
  flex-grow: 1;
  flex-basis: 50px;
  border: 1px solid purple;
  background-color: lavender;
}

#flexbox #large {
  flex-basis: 100px;
  background-color: lightblue;
}

JSFiddle

把这一切放在一起

正如我们之前提到的，该flex属性将所有这三个属性合二为一。如果我们想将flex-grow元素的设置为 1，设置flex-shrink为 2，设置flex-basis为 100px，我们可以使用flex并缩短它：

#child {
    flex-grow: 1;
    flex-shrink: 2;
    flex-basis: 100px;
}

对此：

#child {
    flex: 1 2 100px;
}