Question

我想知道是否有人可以给我一个关于如何计算flexbox布局的简单介绍，特别是在哪个优先顺序中，例如：

{php}
$go_back = htmlspecialchars($_SERVER['HTTP_REFERER']);
{/php}
{if $go_back|strpos:"https://kundencenter.example.org" === false}

$_SESSION['refererURL'] = $go_back;

{elseif isset($smarty.session.refererURL)}
<li id='Primary_Navbar-Account'><a href='".$_SESSION[refererURL]."'><i class='fa fa-home'></i> Homepage</a></li>
{else}
<li id='Primary_Navbar-Account'><a href='https://example.org'><i class='fa fa-home'></i> Homepage</a></li>
{/if}

如果我将容器宽度小于600px，我觉得很有意思;收缩将在缩小之前首先生效（我将第二个黄色块设置为<div id="container" style="display: flex; flex-direction: row; flex-wrap:wrap;"> <div style="flex: 1 0 200px; height:200px; background-color: lightgreen;"></div> <div style="flex: 1 1 400px; height:200px; background-color: lightyellow;"></div> <div style="flex: 1 0 200px; height:200px; background-color: lightblue;"></div> </div>），然后变为3行，然后缩小生效，直到容器达到200px;

我想知道flexbox布局决定的顺序/规则是什么？为什么它不会从400块缩小？

即使我也将所有三个块设置为flex: 1 1 400px;，首先仍然会发生包裹。

由于

Answer 1

请参阅规范中的Flex Layout Algorithm：

Initial Setup

Line Length Determination

Main Size Determination

Cross Size Determination

Main-Axis Alignment

Cross-Axis Alignment

Resolving Flexible Lengths

Definite and Indefinite Sizes

Intrinsic Sizes

首先，在步骤3中，将弹性项目收集到弹性线中。

稍后，在步骤7，他们弯曲（成长，缩小或保持不变）。

所以是的，flex-wrap决定了如何将弹性项目收集到弹性线中，具有更多的优先级＆＃34;比flex-shrink。

Answer 2

flex-shrink属性通常在单行灵活容器（flex-wrap: nowrap）中派上用场。

换句话说，当flex项目无法换行时，flex-shrink会使容器在容器太小时缩小（规范称为负空闲空间）。这样可以防止弹性物品溢出容器。

但是，在多行灵活容器（flex-wrap: wrap）中，大多数情况下不会创建负的可用空间，因为弹性项可以创建其他行。一个例外是当一个多行容器（比如行方向）足够窄以包装所有项目时。这会将项目堆叠在一列中。现在，它们会缩小或保持稳定，具体取决于flex-shrink（demo）。

您有一个行方向，已启用wrap的Flex容器，其中包含三个flex项。

div＃1~ flex: 1 0 200px
div＃2~ flex: 1 1 400px
div＃3~ flex: 1 0 200px

当容器大于800px时，所有物品都留在线上。

当容器破坏低于800px时，div＃3将换行（即使可能，也不需要收缩）。

在600px标记处（div＃1和＃2的组合宽度），div＃2包裹。再一次，不需要缩小。

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div:nth-child(1) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightgreen;
}
div:nth-child(2) {
  flex: 1 1 400px;
  height: 200px;
  background-color: lightyellow;
}
div:nth-child(3) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightblue;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

来自规范：

flex-shrink

[此属性]指定弹性收缩因子，它决定了如何   Flex项目将相对于其他Flex项目缩小   在负空间分布时在flex容器中。

为什么flex项目换行而不是收缩？

2 个答案: