有人可以解释一下什么是 flex 属性吗？ [复制]答案

【问题标题】：Can someone explain me what is flex property? [duplicate]有人可以解释一下什么是 flex 属性吗？ [复制]
【发布时间】：2018-12-17 10:56:37
【问题描述】：

您好，目前我正在学习 flexbox，并且我已经看过很多教程，但我无法弄清楚 flex 属性是做什么的？一些解释它的作用的解释和链接将非常有帮助。谢谢。

【问题讨论】：

到目前为止，是否有任何答案回答了您的问题？如果是这样，请接受最好的，以便其他有相同问题的用户更容易找到信息。

标签： css flexbox

【解决方案1】：

正如 T. Evans 所述，flex 属性是其他三个属性的简写：flex-grow、flex-shrink 和 flex-basis。您可以通过给flex 属性三个值来设置每个属性的值，顺序如下：

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

例如，flex: 0 1 auto;

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

弹性增长

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

示例 1： 在这里，我们使用flex-grow 使一个元素成为另一个元素的两倍。 flex-grow 在一个元素上为 2，在另一个元素上为 1 表示元素将具有 2 比 1 的大小比。将一个flex-grow 设置为 8，将另一个设置为 4 将执行完全相同的操作，因为 2:1 与 8:4 的比率相同。

#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;
}

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

JSFiddle

示例 2： 在这里，我们只在一个元素上设置了 flex-grow，而将另一个设置为默认值 0。这使得元素可以增长以填充尽可能多的空间。我们可以为flex-grow 使用任何值，只要另一个元素具有flex-grow: 0;，它的工作方式完全相同。

#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;
}

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

JSFiddle

弹性收缩

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

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

#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;
}

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

JSFiddle

基于弹性的

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

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

#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;
}

<div id="flexbox">
  <div>NORMAL</div>
  <div id="large">LARGE</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
</div>

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;
}

【讨论】：

这是一个了不起的解决方案！

【解决方案2】：

Flex 属性指的是简写。

基本上看起来像这样：flex: <flex-grow> <flex-shrink> <flex-basis>

这是指项目在display: flex 中的工作方式...

有关这方面的更多信息，我建议查看以下链接：

W3 Schools

CSS Tricks

MDN

【讨论】：