您好，我目前正在学习flexbox，我看了很多教程，但是我不知道flex属性的作用是什么？一些解释和解释其作用的链接将非常有帮助。谢谢。
答案 0 :(得分：0)
Flex属性是指简写。
基本上看起来像这样：flex: <flex-grow> <flex-shrink> <flex-basis>
这是指项目如何在display: flex中工作……
有关此内容的更多信息，建议您查看以下链接：
答案 1 :(得分：0)
正如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，另一个元素上的flex-grow表示这些元素的尺寸比为2：1。将一个#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;
}设置为8，将另一个<div id="flexbox">
<div id="big">BIG</div>
<div id="small">SMALL</div>
</div>设置为4会做同样的事情，因为2：1与8：4的比率相同。
flex-growflex-grow
示例2：在这里，我们仅在一个元素上设置flex-grow: 0;，而将另一个元素的默认值设置为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>
flex-growflex-shrink
弹性收缩
此属性的作用类似于#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;
}，但是比率描述一个元素应该比另一个小多少。另外，默认值为1。
示例：如果我们将一个元素的<div id="flexbox">
<div>NORMAL</div>
<div id="small">SMALL</div>
<div>NORMAL</div>
<div>NORMAL</div>
<div>NORMAL</div>
</div>设置为2，将另一个元素的设置为1，则当父元素太小而无法舒适地容纳每个元素并且子元素必须收缩时，元素将比其他元素缩小更多。
autoauto
弹性基础
此属性设置元素的初始大小。其值可以是flex-grow（自动设置初始大小），也可以是像素数或其他大小单位（例如，例如％或vw。），默认值为flex-basis。
示例：在这里，我们将大多数元素设置为初始大小为50px，并将其#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;
}设置为1，以便它们将增长以填充空间。但是，一个元素的<div id="flexbox">
<div>NORMAL</div>
<div id="large">LARGE</div>
<div>NORMAL</div>
<div>NORMAL</div>
<div>NORMAL</div>
</div>为100px，因此它将比其他元素大。尝试调整窗口大小，以查看此示例的行为。
flexflex-grow
将它们放在一起
如前所述，flex-shrink属性将所有这三个属性组合为一个。如果我们想将元素的flex-basis设置为1，将flex设置为2，将#child {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
设置为100px，则可以使用#child {
flex: 1 2 100px;
}
并将其缩短：
{{1}}
对此：
{{1}}