css - 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 容器的初始设置是 flex-shrink: 1 .

这意味着 flex 元素可以收缩以避免溢出容器。

一旦禁用此功能， flex 元素将不会收缩到低于其指定的 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>

I set flex-basis to 200px for items a and b but they are both shorter than 200px width. I was under the impression that flex-basis is the "initial" width of the item, meaning "min-width" of an item. But clearly that's not true, so I don't understand what "initial" means.

事实上，这是真的。 flex-basis 设置元素的初始长度。正如您所定义的，元素的初始宽度为 200px。 然后 flex-shrink 和 flex-grow 被应用。

What is the specific mathematical formula that calculate the width of item a and b when a pixel value is given for flex-basis?

此处解释计算:

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