Flex 项目正在收缩到 flex-basis 以下

Question

我一直在阅读堆栈溢出问题和其他关于 flex-basis 应该做什么的博客，但我仍然无法完全理解它如何影响元素的行为。

这是我的代码示例：

.item {
  background-color: red;
  border: 1px solid pink;
  margin: 10px;
  padding: 10px;
}

.container {
  display: flex;
}

.container .item {
  height: 50px;
  flex-grow: 1;
}

.container3 {
  flex-direction: row;
  width: 500px;
}

.container3 .a,
.container3 .b {
  flex-basis: 200px;
}

<div class="container container3">
  <div class="item a">Segmentation fault</div>
  <div class="item b">Null pointer exception</div>
  <div class="item c">hello</div>
  <div class="item d">hello</div>
</div>

对于a 和b，我将flex-basis 设置为200px，但它们都比200px 宽度短。我的印象是flex-basis 是项目的“初始”宽度，意思是项目的“最小宽度”。但显然这不是真的，所以我不明白“初始”是什么意思。

当给flex-basis一个像素值时，计算项目a和b的宽度的具体数学公式是什么？

Answer 1

弹性容器的初始设置是flex-shrink: 1。

这意味着允许弹性项目收缩以免溢出容器。

一旦禁用此功能，弹性项目将不会缩小到其指定的flex-basis 值以下。

* { flex-shrink: 0; } /* NEW */

.item {
  background-color: red;
  border: 1px solid pink;
  margin: 10px;
  padding: 10px;
}

.container {
  display: flex;
  border: 1px dashed black;
}

.container .item {
  height: 50px;
  flex-grow: 1;
}

.container3 {
  flex-direction: row;
  width: 500px;
}

.container3 .a,
.container3 .b {
  flex-basis: 200px;
}

<div class="container container3">
  <div class="item a">Segmentation fault</div>
  <div class="item b">Null pointer exception</div>
  <div class="item c">hello</div>
  <div class="item d">hello</div>
</div>

对于a 和b，我将flex-basis 设置为200px，但它们的宽度都小于200px。我的印象是flex-basis 是项目的“初始”宽度，意思是项目的“最小宽度”。但显然这不是真的，所以我不明白“初始”是什么意思。

事实上，这是真的。 flex-basis 设置项目的初始长度。根据您的定义，您的项目的初始宽度为 200 像素。 然后应用flex-shrink和flex-grow。

当给flex-basis一个像素值时，计算项目a和b的宽度的具体数学公式是什么？

这里解释了计算：

• How does flex-shrink factor in padding and border-box?