Question

我今天在一些代码中偶然发现了flex: 1并用Google搜索了一些有关它的功能的信息。 w3schools简明扼要地说：

让所有灵活项目的长度相同，无论其内容如何。

但是我已经看到它用于其他情况，例如故意将兄弟元素推到底部，是否有人知道列出flex: 1的有用案例？

Answer 1

flex: 1是flex: 1 1 0的缩写，是表示最常见效果的四个flex值之一：

flex: initial - 相当于flex：0 1 auto。
flex: auto - 相当于flex：1 1 auto。
flex: none - 相当于flex：0 0 auto。
flex: <positive-number> - 相当于flex：＆lt; positive-number＆gt; 1 0.

来源：

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: 1 1 0是flex-grow: 1; flex-shrink: 1; flex-basis: 0;

的简写

flex-grow: 0; flex-shrink: 1; flex-basis: auto;或使用简写flex: 0 1 auto是弹性项目的默认值。

当谈到有用的情况时，列表会太长，所以下面是两个样本，其中第一个显示如何使一个弹性项目占用剩余空间，并将另一个推向右侧。

＆＃13;

.flex-container {
  display: flex;
}

.flex-item {
  background: lightgreen;
}

.flex-item.fill-remaining-space {
  flex: 1;
  background: lightblue;
}

＆＃13;

<div class="flex-container">

  <div class="flex-item fill-remaining-space">
    Hey there.
  </div>

  <div class="flex-item">
    This item will be pushed to the right.
  </div>

</div>

＆＃13;

第二个如何3个项目共享父母的空间，无论他们自己的内容如何。

＆＃13;

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
  border: 1px solid black;
}

＆＃13;

<div class="flex-container">

  <div class="flex-item">
    Hey there.
  </div>

  <div class="flex-item">
    This item is wider.
  </div>

  <div class="flex-item">
    This item is the widest of all.
  </div>

</div>

＆＃13;

Answer 2

CSS border，padding和margin属性都是简写属性。这意味着他们将多个属性合并为一个。

CSS flex属性也不例外。它只是简化合并的方式：

flex-grow
flex-shrink
flex-basis

因此，使用flex属性的原因与使用任何其他CSS速记属性的原因相同：

最小化您的代码
重设/更改默认值

就功能而言，flex属性没有任何独特之处。 flex属性可以执行的任何操作也可以使用longhand属性的组合来完成。

例如：

flex: 2 1 250px

与：

完全相同

flex-grow: 2
flex-shrink: 1
flex-basis: 250px

然后，flexbox规范将＆＃34; shorthanding＆＃34; 更进一步，定义更短的速记：

<强> flex: <positive-number>

相当于flex: <positive-number> 1 0。

使弹性项目具有灵活性，并将弹性基础设置为零。

^{http://www.w3.org/TR/css-flexbox-1/#flex-common}

这里列出了常用的flex速记规则：

https://www.w3.org/TR/css-flexbox-1/#flex-common

规范也提出了这个建议：

鼓励作者使用flex简写而不是直接使用其纵向属性来控制灵活性，因为速记正确地重置任何未指定的组件以适应常见用途。

^{http://www.w3.org/TR/css-flexbox-1/#flex-components}

这是一篇包含更多信息的相关帖子：

Understanding the flex property

Answer 3

在this右侧的详细指南中有一个粗体声明：

“建议您使用此速记属性而不是设置单个属性。快捷方式会智能地设置其他值。”

我发现这很聪明，这意味着基于弯曲方向和柔性包装通常会产生所需的结果。我只是，如果我不能用flex得到它，则严格地仅手动操作属性：1 - 即使它需要DOM修改。在我看来，它使你的flex-use和整个CSS更具可读性和可理解性，这在编写高质量和可维护的代码时是不可避免的。

更具体地回答你的问题（由@TylerH提出）：当你使用flex进行定位/调整时，每一个案例都会先尝试flex：1。在大多数情况下，您会发现结果令人满意，并会为您提供可维护的代码。如果您只需要更具体/特殊的定位，那么您应该深入了解flex的参数。

flex的含义和好处：1

3 个答案: